我想在D3.js树形图中的链接上添加文本

Question

我想在D3.js树形图中的链接上添加文本

use*_*479 5 javascript tree svg label d3.js

我想在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>

Run Code Online (Sandbox Code Playgroud)

右下角的链接上没有文字.我认为应该使用'节点'数据.所以,我试着使用'root'数据.但是,如果我使用'root'数据,我不会一无所获.

我认为这部分是问题.

link.append("text").data(nodes)

我该如何修改？

我的数据.

{ "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" }]}]}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Viv*_*idD 21

用于链接,一个不能访问d.x,d.y,d.rule,或类似领域中,由于连杆不与单个数据点相关联的,但它有它的源和目标.这意味着应该像这样访问数据:d.source.x,d.target.y等等.

关键代码段应如下所示:

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;
    });

Run Code Online (Sandbox Code Playgroud)

这是工作示例:jsfiddle

在此输入图像描述

当然,您可以更改文本颜色,位置等,以满足您的需求.

希望这可以帮助.

嗨，此代码不支持 d3 V4，有什么方法可以支持 V4？ (2认同)

归档时间：	11 年，12 月前
查看次数：	10215 次
最近记录：	9 年，12 月前