javascript - d3.js可视化json文件麻烦

Question

我正在使用 D3.js 创建可视化，并使用 http://bl.ocks.org/mbostock/7607535 中的基本框架

此可视化正在读取一个只有两个值的 json 文件...一个字符串值和一个整数。对于我的可视化，我想读取一个附加字符串值以显示在下面的行中。但是，我无法在 d3 代码中找到需要更改的内容才能实现此目的

这是我的 d3 代码:

d3.json("test.json", function(error, root) {
  var focus = root,
      nodes = pack.nodes(root);

  svg.append("g").selectAll("circle")
      .data(nodes)
    .enter().append("circle")
      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", function(d) { return (d.r); })
      .style("fill", function(d) { return d.children ? color(d.depth) : null; })
      .on("click", function(d) { return zoom(focus == d ? root : d); });

  svg.append("g").selectAll("text")
      .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("fill", "white")
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
      .style("display", function(d) { return d.parent === root ? null : "none"; })
      .text(function(d) { return d.name; });

  d3.select(window)
      .on("click", function() { zoom(root); });

  function zoom(d, i) {
    var focus0 = focus;
    focus = d;

    var k = innerDiameter / d.r / 2;
    x.domain([d.x - d.r, d.x + d.r]);
    y.domain([d.y - d.r, d.y + d.r]);
    d3.event.stopPropagation();

    var transition = d3.selectAll("text,circle").transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

    transition.filter("circle")
        .attr("r", function(d) { return k * d.r; });

    transition.filter("text")
      .filter(function(d) { return d.parent === focus || d.parent === focus0; })
        .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
        .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
        .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
  }
});

d3.select(self.frameElement).style("height", outerDiameter + "px");

</script>

Answer 1

不能 100% 确定这就是您的意思，但我认为您的评论可能很接近 Christian。问题是

svg.append("g")
   .selectAll("text")
   .data(nodes)
   .enter()
   .append("text")
   .attr("class", "label")
   .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
   .attr("fill", "white") .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
   .style("display", function(d) { return d.parent === root ? null : "none"; }) 
   .text(function(d) { return d.name; })
   .append("text") //this is the problem
   .text(function(d) { return d.team; });

在上面的代码中，您将一个文本元素附加到另一个文本元素中。看看this 。打开浏览器调试器并检查 SVG 元素。您应该看到类似以下内容:

<svg width="100" height="100">
    <text x="50" y="50" style="fill: #000000;">
        hello
        <text x="50" y="75" style="fill: #000000;">hi!</text>
    </text>
</svg>

你真正想要的东西是这样的

<svg width="100" height="100">
    <text x="50" y="50" style="fill: #000000;">
        hello
    </text>
    <text x="50" y="75" style="fill: #000000;">hi!</text>
</svg>

希望有帮助!