Question

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

我希望结果应显示在图像中，添加“ 门票”和“ 事件”之类的文本，并在该文本上应用锚链接

您可以看到该图像，它说明了我的期望。我想附加这样的文本并在其上添加一个锚链接。正如我在此图中提到的，每个节点都有2个文本。

这是我的代码

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

Answer 1

我以前从未做过任何需要我在svg对象中使用url的工作，因此我不确定实现它的方式是否最有效/正确。我想知道是否有更正确的方法来做到这一点。

所以这是我相信您想要的代码库： https://codepen.io/anon/pen/WKrKmq?editors=0011

以您从d3.js collapsible tree bl.ock提供的代码为基础，我首先使用以下属性填充treeData； “事件”，“门票”和“ 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]);

Answer 2

您是否尝试过使用所需标签对SVG进行硬编码？ SVG标签内不允许使用普通的HTML标签。只需添加诸如树节点文本之类的文本，并使它们可单击即可。

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

如何在节点的D3树形图中添加HTML代码？

2 个答案: