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

如何将其与一个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("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等工具测试这两种解决方案。

d3.js / javascript高效代码

1 个答案: