Javascript D3中的选择，Jquery

在Mike发布的答案中，他概述了基于索引或自定义过滤器对匹配元素应用更改的三种不同方法。我试图澄清，希望更多的人，而不仅仅是我自己，在这些解决方案中的实际选择

因此，给定一个包含6个SVG矩形和class.bar的文档，我们有以下不同的选择以及它们返回的内容：

d3.select.bar：

d3.selectAll.bar：

美元.bar：

但是如果我们想使用d3.selection.attr，则返回

TypeError: Property 'style' of object #<SVGRectElement> is not a function

这将如预期的那样起作用

然后，如果我们想应用一个过滤器，比如

filter(function (d) { return d === 5 || d === 15;}

必须使用d3.selectAll.bar，d3.selectd3.selectAll.bar将无法正常工作

---

我已经阅读了Mike关于选择的优秀教程和文档，但就在我认为我已经弄明白的时候，突然出现了一些让我惊讶的东西。那么，这些选择之间的区别是什么，我如何知道何时使用哪一个呢？非常感谢，很抱歉发了这么长的帖子

一般来说，您不应该通过索引访问返回选择的元素，而应该过滤或使用子选择。这样，您就可以毫无问题地应用.attr和.atyle。原因是D3不像jquery那样返回DOM元素的纯数组，而是返回支持D3操作的包装器中的元素。不过，它的行为仍然有点像数组——如果索引到它中，就会得到一个纯DOM元素。您还可以给d3.select一个DOM元素，它将围绕这个元素生成一个包装器，以启用所有d3元素

---

如果您看一下，您会发现一些关于如何使用它和子选择的示例。例如，您可以使用这些技术获取选择的第三个元素。只有将数据绑定到正在筛选的对象时，使用.filter函数才有意义，否则子选择应该执行您想要的操作。

我过去曾尝试过这样做，但也遇到类似的错误。然后我意识到我并没有真正遵循预期的API。第二次开始通过索引访问选择元素时，您就偏离了常规路径

看

所以，如果你想设计你的第三个酒吧，你会这样做

d3.selectAll(".bar").style("color", function(d,i) { return i === 2 ? "red" : null; } )

---

如果你的选择比这个嵌套的多一层，让它函数化，i，j，类似地从那里开始。等等。

就像Lars建议的那样，您也可以在更新样式之前选择，以避免将任何内容设置为null:d3.selectAll.bar rect.FilterFunction，i{return i==2；}.stylefill，red@roippi谢谢过滤器上的例子，我会投票，但我没有声誉！d3.selectAll.bar[0][2]返回原始DOM元素，而DOM元素没有样式函数。d3.selectd3.selectAll.bar不起作用，因为.select需要DOM元素或选择器字符串，而不是d3 selection。jQuery也不返回元素数组。它返回一个类似数组的jQuery对象，并允许您通过其索引访问所选元素。与普通数组有什么区别？返回值在我看来就像一个普通的数组。这仅仅是因为Chrome控制台像普通数组一样显示类似数组的对象。的确，jQuery对象与数组非常相似，它们甚至有.push和.splice方法，但没有.pop方法。但是它们还有更多的方法.filter、.find、.on、…，这些方法是数组所没有的，也就是说，您拥有与D3相同的方法：一个提供所有jQuery功能的包装器。如果这仍然不能令人信服，$'.bar'instanceof数组返回false。

d3.selectAll(".bar")[0][2]  

TypeError: Property 'style' of object #<SVGRectElement> is not a function

d3.select(d3.selectAll(".bars rect")[0][2]).style("fill", "red")

filter(function (d) { return d === 5 || d === 15;}

d3.selectAll(".bar").style("color", function(d,i) { return i === 2 ? "red" : null; } )