d3.js 选择条件渲染

Question

使用d3js join模型，是否可以根据数据内容做条件渲染？

我想做这样的事情：

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

您可以使用过滤器：

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

示例在这里。