更新機能でのd3.filterの使用

Question

私は2つの異なる領域 "lombardy"と "emiglia"のデータに基づいて棒グラフを描画しています。

以下は私のコードのアウトテイクです。まず、 "lombardy"の領域をフィルタリングして、グラフを描画します。今私は、 "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という配列。

function draw(myRegion){ 

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

今、あなたはこの新しい配列（newData）を使用します。次に、d3.csvの内側に、あなたの更新機能（ここでは、私はdrawそれを呼びます）の引数として領域を有する、この引数に基づいてフィルタリングdataを作成しますバーを描く

これは機能draw呼び出すためのボタンを使用した例である：https://plnkr.co/edit/QCt1XgWxrSM8MlFijyxb?p=preview

（警告：この例では、私はD3 v4.xのを使っていますが、私はあなたがD3 V3を使用していることを確認するので、このあなたは一般的なアイデアを参照するための単なる一例である）

---

ただ、最後のヒント：通常、我々はこのような可視化を変更するには、データをフィルタリングしません。通常のアプローチは、のはD3の道は、単に列としてロンバルディアとEmigliaの両方を使用してデータセットを作成して、それを呼び出してみましょう：

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

：

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

そのように、我々は、単に使用してバーの幅を設定することができます

そしてカラム（LombardyまたはEmiglia）に従ってregionと設定します。