javascript 我想在 D3.js 树图中的链接上添加文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24360847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to add text on the link in D3.js tree graph
提问by user3766479
I want to make a decision tree in D3.js and to add text on the link.
我想在 D3.js 中制作决策树并在链接上添加文本。
<!DOCTYPE html>
<meta charset="utf-8">
<body><script src="../d3-master/d3.min.js"></script>
<head><link rel="stylesheet" type="text/css" href="../D3css/D3css.css"></head>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
rect_width = 90,
rect_height = 20;
var tree = d3.layout.tree()
.size([height * 2, width / 2]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("../data/ID3.json", function(error, root) {
var nodes = tree.nodes(root),
links = tree.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("g")
.attr("calss", "link")
.attr("fill", "none");
link.append("path")
.attr("d", diagonal)
.attr("stroke", "lightsteelblue");
link.append("text")
.data(nodes)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("y", -85)
.attr("text-anchor", "middle")
.attr("fill", "black")
.text(function(d) { return d.rule; });
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("rect")
.attr("transform", "translate(-42,-8)")
.attr("width", rect_width)
.attr("height", rect_height)
.style("fill", "lightsteelblue");
node.append("text")
.attr("dy", ".31em")
.attr("text-anchor", "middle")
.attr("transform", function(d) { return "translate(" + d.x / 128 + "," + d.y / 128 + ")"; })
.text(function(d) { return d.name; });
});
</script>
There is no text on the link at the bottom right. I think to was due to use 'nodes' data. so, I tried in to use 'root' data. but, I don't come out of nothing if I use 'root' data.
右下角的链接上没有文字。我认为是由于使用了“节点”数据。所以，我尝试使用“root”数据。但是，如果我使用“root”数据，我就不是无中生有。
I think that this part is problem.
我认为这部分是问题。
link.append("text") .data(nodes)
link.append("text") .data(nodes)
How should I revise??
我该怎么复习？？
my data.
我的数据。
{ "name" : "0", "rule" : "null",
"children" : [{ "name" : "2", "rule" : "sunny",
"children" : [{ "name" : "no(3/100%)", "rule" : "high" },
{ "name" : "yes(2/100%)", "rule" : "normal" }]},
{ "name" : "yes(4/100%)", "rule" : "overcast" },
{ "name" : "3", "rule" : "rainy",
"children" : [{ "name" : "no(2/100%)", "rule" : "TRUE" },
{ "name" : "yes(3/100%)", "rule" : "FALSE" }]}]}
回答by VividD
For links, one can't access d.x, d.y, d.rule, or similar fields, since link is not associated with a single data point, but it has its source and target. This means the data should be accessed like this: d.source.x, d.target.y, and so on.
对于链接，不能访问d.x、d.y、d.rule或类似字段，因为链接不与单个数据点相关联，但它有其源和目标。这意味着应该像这样访问数据：d.source.x，d.target.y，等等。
The key code segment should look like this:
关键代码段应如下所示：
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("g")
.attr("class", "link");
link.append("path")
.attr("fill", "none")
.attr("stroke", "#ff8888")
.attr("stroke-width", "1.5px")
.attr("d", diagonal);
link.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("transform", function(d) {
return "translate(" +
((d.source.y + d.target.y)/2) + "," +
((d.source.x + d.target.x)/2) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
console.log(d.target.rule);
return d.target.rule;
});
Here is working example: jsfiddle
这是工作示例：jsfiddle
Of course, you can change text color, position, etc. to suit your needs.
当然，您可以更改文本颜色、位置等以满足您的需要。
Hope this helps.
希望这可以帮助。
