Ich möchte hinzufügen, text auf den link in D3.js Baum-Diagramm
Ich möchte, um eine Entscheidung Baum in D3.js und das hinzufügen von text auf den link.
<!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>
Es ist kein text auf den link unten rechts.
Ich denke, dass war wegen 'Knoten' Daten.
so, ich habe versucht, in für die Verwendung von 'root' Daten.
aber, ich komme nicht aus dem nichts, wenn ich 'root' Daten.
Ich denke, dass dieses Teil ist ein problem.
link.append("text")
.Daten(Knoten)
Wie soll ich überarbeiten??
meine Daten.
{ "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" }]}]}
- Für d3 v4, diese Antwort hat mich gerettet: stackoverflow.com/questions/41600142/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Für die links, man kann nicht auf
d.x
,d.y
,d.rule
oder ähnlichen Bereichen, da link nicht im Zusammenhang mit einem einzigen Datenpunkt, aber es hat seine Quelle und Ziel. Dies bedeutet, dass die Daten zugegriffen werden soll, wie diese:d.source.x
,d.target.y
, und so weiter.Den Schlüssel-code-segment sollte wie folgt Aussehen:
Hier arbeitet Beispiel: jsfiddle
Natürlich können Sie den text ändern, Farbe, position, etc. um Ihren Bedürfnissen zu entsprechen.
Hoffe, das hilft.