Question

我有一些D3.js代码可以创建一个树形图，但是我试图稍微修改一下代码来阻止为值为0的元素打印不必要的标签。

以下代码似乎添加了tspan并为其指定了文本值。但是，如果.text(function(d){});内部似乎无法访问的值d.data.size为0，我不希望显示标签！

有什么建议吗？

更新数据结构如下：

{"name":"Gradings","children":[{"name":"Full Assurance","children":[{"name":"Domains","children":[{"name":"D1","size":8},{"name":"D2","size":7},{"name":"D3","size":11},{"name":"D4","size":8},{"name":"D5","size":2},{"name":"D6","size":3},{"name":"D7","size":3},{"name":"D8","size":4}]}]},{"name":"Substantial Assurance","children":[{"name":"Domains","children":[{"name":"D1","size":7},{"name":"D2","size":3},{"name":"D3","size":5},{"name":"D4","size":2},{"name":"D5","size":2},{"name":"D6","size":2},{"name":"D7","size":1},{"name":"D8","size":4}]}]},{"name":"No Assurance","children":[{"name":"Domains","children":[{"name":"D1","size":5},{"name":"D2","size":1},{"name":"D3","size":3},{"name":"D4","size":2},{"name":"D5","size":0},{"name":"D6","size":1},{"name":"D7","size":1},{"name":"D8","size":2}]}]},{"name":"Limited Assurance","children":[{"name":"Domains","children":[{"name":"D1","size":4},{"name":"D2","size":1},{"name":"D3","size":2},{"name":"D4","size":1},{"name":"D5","size":0},{"name":"D6","size":0},{"name":"D7","size":1},{"name":"D8","size":1}]}]}]}

我认为需要改变的代码是：

cell.append("text")
        .attr("clip-path", function (d)
        {
            return "url(#clip-" + d.data.id + ")";
        })
        .selectAll("tspan")
        .data(function (d)
        {
            return d.data.name.split(/(?=[A-Z][^A-Z])/g);
        })
        .enter().append("tspan")
        .style('fill', 'black')
        .style('font-weight', 'bold')
        .attr("x", 4)
        .attr("y", function (d, i)
        {
            return 13 + i * 10;
        })
        .text(function (d)
        {
            return d;
        });

Answer 1

在输入选择中，您可以使用以下内容获取父选择的数据：

d3.select(this.parentNode).data();

因此，在text函数中，您可以编写如下内容：

.text(function(d) {
    if (d3.select(this.parentNode).data()[0].size !== 0) {
        return d;
    }
})

使用三元运算符也是如此。

这是一个使用（部分）数据的演示。我更改了数据以使D4尺寸= 0.除了D4之外，所有名称都将被打印。

var data = [{
  "name": "D1",
  "size": 8
}, {
  "name": "D2",
  "size": 7
}, {
  "name": "D3",
  "size": 11
}, {
  "name": "D4",
  "size": 0
}, {
  "name": "D5",
  "size": 2
}, {
  "name": "D6",
  "size": 3
}, {
  "name": "D7",
  "size": 3
}, {
  "name": "D8",
  "size": 4
}];

var svg = d3.select("svg");
var texts = svg.selectAll(null)
  .data(data)
  .enter()
  .append("text")
  .attr("x", 20)
  .attr("y", function(d, i) {
    return 20 + 16 * i
  })
  .selectAll(null)
  .data(function(d) {
    return d.name
  })
  .enter()
  .append("tspan")
  .text(function(d) {
    if (d3.select(this.parentNode).data()[0].size !== 0) {
      return d;
    } 
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

D3JS V4根据值停止追加tspan

1 个答案: