在d3中有条件地建立小组

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;});

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