選擇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

通常，您不應通過索引訪問返回選擇的元素，而應過濾或使用子選擇。 這樣，您可以.atyle()應用.attr()和.atyle() 。 原因是D3不返回DOM元素的“純”數組（如jquery所做），而是返回支持D3操作的包裝器中的元素。 它仍然表現得像一個數組 - 如果你索引它，你會得到一個“純粹的”DOM元素。 您還可以為d3.select()提供一個DOM元素，它將生成圍繞此元素的包裝器，以啟用所有D3內容。

如果你看一下filter()的文檔 ，你會發現一些關於如何使用它和子選擇的例子。 例如，您可以使用這些技術來獲取選擇的第三個元素。 使用.filter()函數只有在將數據綁定到要過濾的對象時才有意義，否則子選擇應該執行您想要的操作。