d3.js - .append() 根据条件不同的选择？

Question

我有一个与 Updating SVG Element Z-Index With D3 类似的问题

我的首选解决方案是在我的 svg 中包含两个组，如 answer by notan3xit 中所述。 .

但我有一个数据集，其中一个数据属性上的 bool 标志确定 svg 元素属于哪一组。

svg.selectAll("path")
   .data(d)
   .enter()
   .if(d.property).appendToGroup1() 
   .else.appendToGroup2()

这显然行不通，但类似这样。

我只想迭代数据一次，并在运行时将生成的 svg 元素附加到相应的组。

有什么想法如何使用 d3.js 实现这一目标吗？

Answer 1

尝试

.each(function(d){
  var toAppend = $(this);
  if (!!d.property){
    toAppend.appendtoGroup1();
  } else {
    toAppend.appendToGroup2();
  }
  })//...

总体思路是将 d 传递到回调中，并在该回调中应用正确的追加方法。首先在封闭的范围内保存对要附加的内容的引用应该更清晰，这样您就可以轻松地对其调用 .append() 。