如何在节点的D3树形图中添加HTML代码？
Sid*_*uri 7 javascript php d3.js
我正在使用D3.js树形图
在这里,我想添加HTML代码以显示更多数据,并在每个文本" ticket "和" events " 上应用锚点链接.
我期待结果应该显示在图像中,添加" 门票 "和" 事件 "等文本并在该文本上应用锚点链接
你可以看到那个图像,它可以告诉我的期望.我想附加这样的文本并在其上添加锚链接.如图所示,每个节点都有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>";
});
如果您需要完整的代码,请到这里
我以前从未参与任何要求我在svg对象中使用url的东西,所以我不确定我实现它的方式是否最有效/正确.我有兴趣知道是否有更正确的方法来做到这一点.
所以这是我认为你想要的代码:https://codepen.io/anon/pen/WKrKmq？edit = 0011
基于你从d3.js可折叠树bl.ock提供的代码,我开始使用以下属性填充treeData; 'events','ticket'和'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]);