Question

我正在使用D3.js创建可视化，并使用了http://bl.ocks.org/mbostock/7607535

中的基本框架

这个可视化是在json文件中读取，只有两个值...一个字符串值和一个int。对于我的可视化，我想读一个额外的字符串值，以显示在下面的行上。但是，我无法在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％肯定这是你得到的，但我想你可能已经接近你的评论克里斯蒂安。

的问题

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>

希望有所帮助！

d3.js可视化json文件麻烦

1 个答案: