Question

我正在尝试使用D3中的力布局来构建图形。我想根据数据构建不同的外观节点。目前，所有节点都有一个类别和一个名称。因此，我绘制了一个svg:g，其中包含两个rect和两个text元素。

我的代码目前看起来像这样：

// nodes are in the form: { group: 'string', name: 'string2' }
this.node = this.node.data(this.node, function(d) { return d.id; });

var g = this.node.enter().
    append('svg:g').
    attr('transform', function(d) { return 'translate('+ d.x +','+ d.y +')'; });
g.append('svg:rect').attr('h', 20).attr('w', 100);
g.append('svg:rect').attr('y', 20).attr('h', 20).attr('w', 100);
g.append('svg:text').text(function(d) { d.group; });
g.append('svg:text').attr('y', 20).text(function(d) { d.name; });

但是，如果节点没有名称，我想压制第二个rect和text的创建。从逻辑上讲，如果不是d3中的隐式迭代器，我会做类似的事情：

var g = this.node.enter().
    append('svg:g').
    attr('transform', function(d) { return 'translate('+ d.x +','+ d.y +')'; });
g.append('svg:rect').attr('h', 20).attr('w', 100);
g.append('svg:text').text(function(d) { d.group; });


// unfortunately 'd' isn't defined out here.
// EDIT: based on comment from the answer below; the conditional should
// be for the text and the related rectangle.
if(d.name) {
  g.append('svg:rect').attr('y', 20).attr('h', 20).attr('w', 100);
  g.append('svg:text').attr('y', 20).text(function(d) { d.name; });
}

Answer 1

您可以在each选项上使用g来决定是否添加标签。

g.each(function(d) {
    if (d.name){
       var thisGroup = d3.select(this);

       thisGroup.append("text")
                 .text(d.group);
       thisGroup.append("text")
                .attr("y", 20)
                .text(d.name);
});

但是，请注意，如果您要更新数据，此结构可能会令人困惑。

如果您希望能够整齐地更新，我建议您进行嵌套选择：

var labels = g.selectAll("text")
     .data(function(d){ d.name? [d.group, d.name]:[]; });

labels.enter().append("text");
labels.exit().remove();

labels.text(function(d){return d;})
          .attr("y", function(d,i){return i*20;});

数据连接函数测试父数据对象，并根据它传递一个数组，该数组包含要用于标签文本的两个值，或者一个空数组。如果它通过空数组，则不会创建任何标签;否则，每个标签都有它的文本由数组中的值设置，并且它是由索引设置的垂直位置。

在d3中有条件地建立小组

1 个答案: