javascript - d3.js/javascript 高效代码

Question

下面的filter是一样的，但是它的结果应用于两个不同的元素:

mNode.filter(function(otherNode) {
    return connectedNodes.indexOf(otherNode.id) > -1
}).select("image").style("opacity", BACKGROUND_OPACITY);

mNode.filter(function (otherNode) {
    return connectedNodes.indexOf(otherNode.id) > -1;
}).select("circle").style("stroke", "#f6f6f6");

如何在不重复代码的情况下将它组合成一个过滤器？

其次，有没有更高效的申请对立面的方法？

mNode.filter(function(otherNode) {
     return connectedNodes.indexOf(otherNode.id) > -1
}).select("image").style("opacity", BACKGROUND_OPACITY);
mNode.filter(function(otherNode) {
      return connectedNodes.indexOf(otherNode.id) == -1
}).select("image").style("opacity", DEFAULT_OPACITY);

如果条件满足则应用第一种样式，否则应用第二种样式。

谢谢!

Answer 1

回答您的第一个问题:只需使用一个选择:

var filtered = mNode.filter(function(otherNode) {
    return connectedNodes.indexOf(otherNode.id) > -1
});

然后:

filtered.select("image").style("opacity", BACKGROUND_OPACITY);
filtered.select("circle").style("stroke", "#f6f6f6");

你的第二个问题有点复杂，并且有不同的解决方案。我会使用 each 来检查每个节点。像这样的东西:

mNode.each(function(d) {
  if (connectedNodes.indexOf(d.id) > -1) {
    d3.select(this).select("image").style("opacity", BACKGROUND_OPACITY);
  } else {
    d3.select(this).select("image").style("opacity", DEFAULT_OPACITY);
  }
})

但是，我要说的是，直觉上，您的代码比 each 更快。您始终可以使用 jsPerf 等工具测试这两种解决方案.