Javascript d3.js选择条件渲染
使用d3js连接模型,是否可以基于数据内容进行条件渲染 我想这样做:Javascript d3.js选择条件渲染,javascript,d3.js,Javascript,D3.js,使用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'); //} no
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();
似乎没有一种方法可以使用连接模型(enter/exit)进行条件渲染。我可以用selection.each()强制它,但这似乎违背了选择模型的目的。您可以使用:
示例。完美!不知道我怎么会在文档中漏掉这个。谢谢
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');