d3 - 如何從g中選擇特定元素並對其進行變換

我正在通過在d3中構建我的第一個可視化的示例來緩慢工作，並且我現在難以理解如何選擇g中的特定對象分組和顯示方式與其他方式不同。d3 - 如何從g中選擇特定元素並對其進行變換

你可以看到我的工作表至今這裏：

http://plnkr.co/edit/aYJjwvNPcbDGQdUu6SOJ?p=preview

從本質上講，圖表旨在顯示某些類型區的平均銷售價格，具有選擇開關的地區之間移動。

不幸的是，我正在努力解決兩個問題。

1）第一個選定區域'Cannock Chase'的初始小節級別比他們應該高，並且如果將選擇返回給它，則降低。 2）我最初的目標是在圖表上顯示一條水平線來表示一個區域內所有銷售的平均價格。

它目前顯示爲圖表中的矩形。

你能幫我弄清楚如何選擇最後的'rect'嗎？

它應該開始：

d3.select("svg").selectAll("g")

但我可以不知道如何挑選，最後給出有沒有「身份證」。這是我應該補充的嗎？

來源

2015-08-27 elksie5000

酒吧高地

的原因嗎欄高度差是因爲你的初始屬性設置爲y和高度是從您在更改處理有那些

你必須在第一個不同

.attr("y", function(d){ 
    return height - price_scale(d.value); 
    }) 
    .attr("height", function(d) { 
    return price_scale(d.value); 
    })

在後者

.attr("y", function(d){ 
    return price_scale(d.value); 
    }) 
    .attr("height", function(d) { 
    return height - price_scale(d.value); 
    })

y和height的函數被交換。如果你讓他們在同一高度將保持不變

Plunker - http://plnkr.co/edit/3SO6s1Kah43dwTASCvX2?p=preview

造型

有關使用SVG好部分是，你可以使用CSS樣式。如果你只是想以不同樣式的最後一棒，你可以使用

svg rect:last-child { 
    fill: red; 
}

Plunker - http://plnkr.co/edit/9OBw1Okmde73eyXZRVXX?p=preview

請注意，您可能希望爲您的SVG元素，當你有一個ID，併爲您的酒吧一類其他元素或多個圖表。

但是我假設你問的是用d3做這件事。您可以使用相同的選擇

d3.select('svg rect:last-child').style('fill', 'red')

Plunker - 如果你想在一個更大的D3的方式做這個http://plnkr.co/edit/RrLEJa4ZCIEOGSVD4stL?p=preview

但是，你確實希望使用你的數據模型表明最後一個數據點是一些特殊的東西，並用它來設計不同的樣式。

這裏我們使用特殊值「平均」弄清楚，我們需要以不同風格的酒吧一條路（你可以一個特殊的屬性，而不是添加到您的數據，而不是）

... 
.attr("fill", function(d) { 
    if (d.street_split === 'AVERAGE') 
     return 'red' 
    else 
     return "steelblue" 
});

Plunker - http://plnkr.co/edit/8Xt5xX2i2WF6nazoZCeo?p=preview

來源

2015-08-27 14:22:40 potatopeelings

太好了。我非常感謝你的時間，尤其是最後一點。我已經學會了用Python Pandas發佈數據，並且正在努力習慣使用Javascript來處理數據。我會繼續堵塞。再次感謝你：） – elksie5000

d3 - 如何從g中選擇特定元素並對其進行變換

回答

相關問題