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" }]}]}
InformationsquelleAutor user3766479 | 2014-06-23
Schreibe einen Kommentar