Question

文本已附加并在控制台中正确显示，但未显示在图形上...它还包含每个rect / partition / shape的正确数据。图继续看起来像this.一样，我的数据对象正在读取一个文件，该文件具有与该链接上的代码完全相同的数据。

这是控制台中显示的内容：

<rect x="300" y="66.66666666666667" width="100" height="66.66666666666667"><text x="0" y="0" font-size="12px" fill="black" text-anchor="middle" font-family="calibri">B2</text></rect>
    <text x="0" y="0" font-size="12px" fill="black" text-anchor="middle" font-family="calibri">B2</text>
</rect>

当我将鼠标悬停在控制台中的这些项目上时，它会在rect上方放置一个蓝色投影以显示其在页面上的哪个元素，但不会对text元素执行此操作。

这是工作代码：（从上面的链接复制以供学习）

<style>
rect {
  fill: #333;
  opacity: 0.3;
  stroke: white;
}
</style>

<center>   
<svg height="900" width="900">
<g></g>    
</svg>
</center>

<script>
var dataGlob;

d3.json("circPack.json", function(error, data) {
    if (error)
      throw error;
    dataGlob = data;

    var partitionLayout = d3.partition()
  .size([400, 200]);

var rootNode = d3.hierarchy(data)

rootNode.sum(function(d) {
  return d.value;
});

partitionLayout(rootNode);

var nodes = d3.select("svg g")
  .selectAll("rect")
  .data(rootNode.descendants())
  .enter()
  .append("rect")
  .attr("x", function(d) { return d.x0; })
  .attr("y", function(d) { return d.y0; })
  .attr("width", function(d) { return d.x1 - d.x0; })
  .attr("height", function(d) { return d.y1 - d.y0; })

nodes
  .append("text")
  .attr("x", 0)
  .attr("y", 0)
  .attr("font-size", "12px")
  .attr("fill", "black")
  .attr("text-anchor", "middle")
  .attr("font-family", "calibri")
  .text(function(d) {
    return d.children === undefined ? d.data.name : '';
  })

});

</script>

在我开始使用D3的布局/层次结构之前，一切都很好。

Answer 1

我查看了其他类型布局的示例，发现它们已经附加了“ g”元素，然后继续附加了其他形状。修正一些代码以附加“ g”，然后rect允许一些文本变得可见。

这是我必须更新的代码的唯一部分：

var nodes = d3.select("svg g")
  .selectAll("g")
  .data(rootNode.descendants())
  .enter()
  .append("g");

nodes
  .append("rect")
  .attr("x", function(d) { return d.x0; })
  .attr("y", function(d) { return d.y0; })
  .attr("width", function(d) { return d.x1 - d.x0; })
  .attr("height", function(d) { return d.y1 - d.y0; })

D3.js v4：文本附加到分区布局，但未显示

1 个答案: