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。