D3：ドロップダウンメニューから選択したプロパティに従って、バーの色を設定します。

Question

私は非常に基本的な質問があります。私は棒グラフとしてプロットされている種/豊富なcsvを持っています。データセットに属、場所などのプロパティのヘッダーが含まれています。プロパティ名のドロップダウンメニューから選択したヘッダー/プロパティに応じて、バーの色をd3.scaleOrdinal()にしたいとします。私はcsvをロードする前にヘッダ/プロパティを知らない。

したがって、ユーザーが「場所」を選択した場合、バーは場所などに応じて色付けされます。ユーザーが選択しない場合、カラーバーはすべて同じ色でなければなりません。

スケールドメインを作成するためにデータからプロパティを選択するにはどうすればよいですか？これは最善の方法

d3.csv("data.csv", function(d) { 
    d.abundance = +d.abundance; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    //color domain 
    var color = d3.scaleOrdinal().range(d3.schemeCategory10); 

    //dropdown menu from csv header 
    var select = d3.select('body') 
    .append('select') 
    .attr('class','select') 
    .on('change',onchange) 
    .selectAll('option') 
     .data(d3.keys(data[0])).enter() 
     .append('option') 
     .text(function (d) { return d; }); 

    function onchange() { 
    selectValue = d3.select('select').property('value') 
    color.domain(data.map(function(d) { return d.selectValue; })) 
    g.selectAll(".bar") 
     .attr("fill", function(d) { return color(d.selectValue); }) 
    }; 
}); 

Answer 1

あなたのデータ配列でselectValueをという名前のプロパティを持っていないです。 selectValueは、実際のプロパティの名前を保持する単なる変数です。そのほかに

color.domain(data.map(function(d) { 
    return d[selectValue]; 
})) 
g.selectAll(".bar") 
    .attr("fill", function(d) { 
     return color(d[selectValue]); 
    }) 

、二つの追加のヒント：

したがって、あなたは代わりに、ドット表記のブラケット表記を使用する必要がありますが、これを必要としない

1. を...

   selectValue = d3.select('select').property('value') 
   

   ...選択した値を取得します。ジャストん：あなたは、列ヘッダを取得するには... ...

   d3.keys(data[0])) 
   

   これを必要としない

   var selectValue = this.value; 
   

2. 。あなたは次のようにすることができます：

   data.columns