Question

柱塞：https://next.plnkr.co/edit/17t5ujwC71IK3PCi

为什么没有在我的所有多边形上添加“测试”标签？

 /* NOT Working code */
 groups.selectAll('.path_placeholder')
   .enter()
   .append('text')
   .text("test")

更新

如Xavier所述，不需要

.enter（）。删除它对所有节点都显示“测试”。但是为什么当我确实提供数据并按如下所示使用enter（）时，它却不起作用：

groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) { 
      return d; 
      })
    .enter()
    .append('text')
    .text(function(d){
      console.log(d);
      return d;
    })

我试图能够为我的每个多边形显示标签，现在我只是尝试为每个多边形添加一个虚拟标签。

Answer 1

您的问题是paths是<path>的选择，而不是<g>：

paths = groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) { return +d; })
    .enter()
    .append('g')
    .attr('class', 'path_placeholder')
    .append('path')//this makes the selection pointing to <path> elements
    .attr('stroke', function(d) { return color(d); })
    .attr('fill', function(d) { return color(d); })
    .attr('opacity', 0);

因此，当您这样做...

groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) { 
        return d; 
    })
    .enter()
    //etc...

...您的“输入”选择为空，因为您已经具有与该paths选择关联的数据。

除此之外，对文本使用正确的“输入”选择几乎没有意义，因为数据是绑定到组的相同数据。

解决方案：此处的解决方案是这种情况的惯用D3，它正在创建实际的<g>选择。

我们可以通过取消选择paths并为其命名来实现这一点：

pathGroups = groups.selectAll('.path_placeholder')
    .data(groupIds, function(d) {
        return +d;
    })
    .enter()
    .append('g')
    .attr('class', 'path_placeholder');

然后您可以做：

paths = pathGroups.append('path')
    .attr('stroke', function(d) {
        return color(d);
    })
    .attr('fill', function(d) {
        return color(d);
    })
    .attr('opacity', 0)

texts = pathGroups.append('text')
    .text(function(d) {
        return d;
    });

以下是分叉的柱塞：https://next.plnkr.co/edit/31ZPXIvSI287RLgO

为什么标签未添加到我的所有路径？

1 个答案: