Question

我使用D3.js并且我可以借助此代码过滤掉“fill”属性（在本例中为红色）的节点：

createEasy

现在，我的下一个目标是按照半径过滤它们，这意味着您可以在下面看到“r”属性。不幸的是，代码没有过滤掉它们。是否有人可以帮助我？非常感谢！

node.filter(function() {
    return d3.select(this).attr("fill") === "red"
})

Answer 1

这里的问题是strict equality：

return d3.select(this).attr("r") === 12
    //strict equality here--------^  ^--- this is a number

您正在将getter attr("r")的结果与数字进行比较。但是，attr("r")会返回字符串，而不是数字。

如果你看一下source code，那么原因很容易理解：getter使用getAttributeNS，其中：

返回具有指定命名空间和名称的属性的字符串值。（强调我的）

因此，使用严格相等，您有"12" === 12，并返回false。

<强>解决方案：

使用相等（==）运算符，或者，与字符串进行比较：

return d3.select(this).attr("r") === "12"
    //this is a string ---------------^

这是一个简单的演示。我用12px半径过滤圆圈......

var filteredCircles = circles.filter(function() {
    return d3.select(this).attr("r") === "12"
}).attr("fill", "red")

......并将它们涂成红色。检查一下：

var data = d3.range(9);
var svg = d3.select("svg");
var circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", function(d) {
    return 10 + 30 * d
  })
  .attr("r", function(d) {
    return d % 2 ? 12 : 8
  })
  .attr("fill", "teal");

var filteredCircles = circles.filter(function() {
  return d3.select(this).attr("r") === "12"
}).attr("fill", "red")

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

按半径大小过滤节点

1 个答案: