代码之家 › 专栏 › 技术社区 › Siddhartha esunuri

如何将html代码添加到节点的d3树图中?

d3.js php javascript

Siddhartha esunuri · 技术社区 · 6 年前

我在用 D3.js tree charts

在这里,我想添加HTML代码来显示更多的数据,并在每个文本上应用锚链接” 门票 “和” 事件 “。

This is my jsbin

我希望结果应该显示在图像中,添加如下文本“ 门票 “和” 事件 “并对该文本应用定位链接

你可以看到那张照片,它告诉了我的期望。我想附加这样的文本,并在上面添加一个锚链接。每个节点有两个文本,如我在这张图片中提到的。

这是我的密码

HTML格式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <div id="tree-container"></div>
</body>
</html>

CSS

.node {
  cursor: pointer;
}

.overlay{
    background-color:#EEE;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font-size:10px; 
  font-family:sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.templink {
  fill: none;
  stroke: red;
  stroke-width: 3px;
}

.ghostCircle.show{
    display:block;
}

.ghostCircle, .activeDrag .ghostCircle{
     display: none;
}

JS公司

 node.select('text')
            .attr("x", function(d) {
                return d.children || d._children ? -10 : 10;
            })
            .attr("text-anchor", function(d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function(d) {
                return d.name;
            }).html(function(d) {
                return "<p>"+d.name+"</p>";
            });

如果你需要完整的密码 go here

2 回复 | 直到 6 年前

REEE 6 年前

我以前从未做过需要在svg对象中使用url的事情,所以我不确定我实现它的方式是否最有效/正确。我想知道是否有更正确的方法来做这件事。

这是我相信你想要的密码笔: https://codepen.io/anon/pen/WKrKmq?editors=0011

根据你提供的代码 d3.js collapsible tree bl.ock ,我首先用以下属性填充treedata;“events”、“tickets”和“url”。之后就很简单了:

    nodeEnter.append('text')
        .attr('x', function(d) {
          return -15;
        })
        .attr('y', function(d) { 
          return 11
        })
        .text(function(d) {
          return 'tickets - ' + d.tickets;
        })
        .on('click', function(d) {
            window.location = d.url;
        })
        .style('font-size', '6px');    

    nodeEnter.append('text')
        .attr('x', function(d) {
          return -15;
        })
        .attr('y', function(d) { 
          return -5
        })
        .text(function(d) {
          return 'events - ' + d.events;
        })
        .on('click', function(d) {
            window.location = d.url;
        })
        .style('font-size', '6px');

我还增加了节点之间的间隔:

var tree = d3.layout.tree()
    .separation(function(d) { return 5; })
    .size([viewerHeight, viewerWidth]);

rioV8 6 年前

您是否尝试过用所需的标记硬编码svg? SVG标记中不允许有普通的HTML标记。只需添加类似于树节点文本的文本并使其可单击。

您需要做的是在创建带有文本和 .on('click', click); 在里面 g.node 新建两个 g 元素,其中一个包含圆和文本,并具有 .on('单击',单击); 是的。在另一个中,添加新的文本元素并使它们响应 .on('click', textClick); 是的。