选择D3,Jquery

Question

在回答麦克张贴在这里,他概述三种不同的方式来改变应用到基于一个指标或者自定义过滤匹配的元素.我试图澄清,希望更多的人,而不仅仅是我自己,这些解决方案中的实际选择.

因此,给定一个带有6个SVG rects with class的文档.bar,我们有这些不同的选择以及它们返回的内容:

d3.select( "巴"):

[Array[1]  
0: rect.[object SVGAnimatedString]  
length: 1  
parentNode: html  
__proto__: Array[0]  

d3.selectAll( "巴"):

[Array[6]  
0: rect.[object SVGAnimatedString]  
1: rect.[object SVGAnimatedString]  
2: rect.[object SVGAnimatedString]  
3: rect.[object SVGAnimatedString]  
4: rect.[object SVGAnimatedString]  
5: rect.[object SVGAnimatedString]  
length: 6  
parentNode: html  
__proto__: Array[0]  

$( "巴"):

[
<rect class=?"dataBars" x=?"53.191489361702125" width=?"212.7659574468085" y="4.761904761904762" height=?"11.11111111111111">?</rect>?,  
<rect class=?"dataBars" x=?"74.46808510638297" width=?"372.3404255319149" y=?"20.634920634920636" height=?"11.11111111111111">?</rect>?, 
<rect class=?"dataBars" x=?"127.6595744680851" width=?"212.7659574468085" y=?"36.507936507936506" height=?"11.11111111111111">?</rect>,?  
<rect class=?"dataBars" x=?"31.914893617021274" width=?"212.7659574468085" y=?"52.38095238095238" height=?"11.11111111111111">?</rect>?,  
<rect class=?"dataBars" x=?"159.5744680851064" width=?"265.9574468085106" y=?"68.25396825396825" height=?"11.11111111111111">?</rect>?,  
<rect class=?"dataBars" x=?"234.04255319148936" width=?"138.29787234042553" y=?"84.12698412698413" height=?"11.11111111111111">?</rect>?,
]  

现在这里变得更加棘手(至少对我来说),比如我想要应用style到第3个矩形,这个矩形可以找到使用

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

但是,如果我们想要使用d3.selection.attr(),那就返回

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")必须使用,d3.select(d3.selectAll(".bar"))将无法正常工作.

我已经阅读了Mike关于选择的优秀教程和文档,但就在我认为我已经弄明白的时候,有些东西弹出来让我感到惊讶.那么这些选择之间的区别是什么,以及如何知道何时使用哪一个？非常感谢,对不起,很长的帖子!

Answer 1

我过去曾试图这样做并遇到类似的错误.然后我意识到我并没有真正遵循预期的API.第二个你开始按索引访问选择元素,你离开了人迹罕至的道路.

请参阅嵌套选择

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

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

如果您的选择是比这更嵌套的一个级别,那么就制作它,function(d,i,j)并且同样地从那里开始.等等.

Answer 2

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

如果您查看 的文档filter()，您会发现一些有关如何使用它和子选择的示例。例如，您可以使用这些技术来获取选择的第三个元素。.filter()仅当您已将数据绑定到要过滤的对象时，使用该函数才有意义，否则子选择应该执行您想要的操作。