在更新函數中使用d3.filter

Question

我正在繪製基於兩個不同區域「倫巴第大區」和「emiglia」的數據的條形圖。

下面是我的代碼的介紹。首先我通過過濾「倫巴第大區」來繪製圖表。現在我想通過從「emiglia」中使用「d.value」的過渡來更新小節。

g.select(".gdp").selectAll(".gdp-rect") 
    .data(data) 
    .enter() 
    .append("rect") 
    .classed("gdp-rect", true) 
    .filter(function(d) {return (d.type == "gdp") }) 
    .filter(function(d) {return (d.region == "lombardy") }) 
    .attr('x', function(d, i) { 
    return i * (width/4) 
    }) 
    .attr('y', function(d) { 
    return h - yBarScale(d.value) 
    }) 
    .attr('width', width/4 - barPadding) 
    .attr('height', function(d) { 
    return yBarScale(d.value) 
    }) 
    .attr("fill", "#CCC") 
    .attr("opacity", 1); 




function emiglia() { 

    g.selectAll(".gdp-rect") 
    .transition() 
    .duration(600) 
    .filter(function(d) {return (d.region == "gdp") }) 
    .filter(function(d) {return (d.region == "emiglia") }) 
    .attr('y', function(d) { 
     return h - yBarScale(d.value) 
    }) 
    .attr('height', function(d) { 
     return yBarScale(d.value) 
    }) 

} 

是否有可能基於d3.filter進行更新？如何切換兩個區域的d.value？

data.tsv

type region year value 
gdp lombardy 2004 70 
gdp lombardy 2008 50 
gdp lombardy 2012 30 
gdp lombardy 2016 110 
gdp emiglia 2004 10 
gdp emiglia 2008 15 
gdp emiglia 2012 23 
gdp emiglia 2016 70 

Answer 1

有幾種方法可以做到這一點，這就是其中之一：

要在更新功能使用filter，你必須先加載數據...

d3.csv("data.csv", function(data){ 

...在一個陣列稱爲data。然後，裏面d3.csv，您創建更新功能（在這裏我稱之爲draw）根據這種說法具有區域作爲參數，並過濾data：

function draw(myRegion){ 

    var newData = data.filter(function(d){ return d.region == myRegion}) 

現在你使用這個新的數組（newData）畫你的酒吧。

這是使用按鈕來調用函數draw一個例子：https://plnkr.co/edit/QCt1XgWxrSM8MlFijyxb?p=preview

（警告：。在這個例子中，我使用D3 4.x版，但我看到你正在使用D3 V3所以，這僅僅是給你看的總體思路爲例）

---

只是一個最後的技巧：通常情況下，我們不過濾數據來改變這樣的可視化。正常的做法，讓我們把它叫做D3方式只需要使用兩個倫巴第和Emiglia創建的數據集列：

type year lombardy emiglia 
gdp 2004 70  10 
gdp 2008 50  15 
gdp 2012 30  23 
gdp 2016 110  70 

通過這種方式，我們可以簡單地設定使用橫槓的寬度：

.attr("width", function(d){ return xScale(d[region])}); 

並根據列（倫巴第或Emiglia）設置region。