d3.js选择条件渲染

Question

使用d3js连接模型，是否可以根据数据内容进行条件渲染？

我想要做这样的事情：

var nodes = svg.selectAll('.node').data(nodes); 

var node = nodes.enter().insert('svg:g').attr('class', 'node'); 

// if node.hasDuration { 
    node.insert('svg:rect'); 
//} else { 
    node.insert('svg:circle'); 
//} 

nodes.exit().remove(); 

似乎有不被使用的连接模型的方式（进入/退出）具有条件呈现。我可以用selection.each（）强制它，但似乎打败了选择模型的目的。

Answer 1

你可以使用一个filter：

var nodes = svg.selectAll('.node').data(nodes); 

nodes.enter() 
    .insert('svg:g') 
    .attr('class', 'node'); 

nodes.filter(function(d,i){ 
    return d.hasDuration; 
}).append('svg:rect'); 

nodes.filter(function(d,i){ 
    return !d.hasDuration; 
}).append('svg:circle'); 

例here。