連想配列をD3のデータとして使用

Question

私は非常に単純な連想配列にデータを読み込んで棒グラフで表示する非常に単純なD3の例があります。

私はこの方法を使用して表示するものは何も得られないようです。代わりに、私は間にタスクを挿入する必要があります：データを連想配列に読み込み、そのデータを単純な配列にコピーし、単純な配列を使って棒グラフを表示します。

chart.selectAll("div") 
    .data(genreAssociative) 
    .enter().append("div") 
    .style("width", function(d) { return d * 10 + "px"; }) 
    .text(function(d) { return d; }); 

上記は機能しません。

genreSimple = []; 
for (var genre in genreAssociative) genreSimple.push(genreAssociative[genre]);   
chart.selectAll("div") 
    .data(genreSimple) 
    .enter().append("div") 
    .style("width", function(d) { return d * 10 + "px"; }) 
    .text(function(d) { return d; }); 

上記はありません。単純な配列を仲介として使用します。連想配列ではなく、標準配列で反復処理する特別な方法はありますか？

Answer 1

機能d3.valuesまたはd3.entriesを使用して、連想配列で直接操作できます。属性を設定する関数（例：function(d) { return d.value; }）で考慮する必要があります。

Answer 2

棒グラフの生成がうまくいくためには、次の形式が最適です。これは、D3の解析後のCSV形式に基づいています。

var dataSet1 = [ 
    {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"}, 
    {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"}, 
    {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"}, 
    {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"}, 
    {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}]; 

この形式では、座標、大きさ、凡例、およびHTMLリンクを相互に関連付けることができます。

実例は、http://bl.ocks.org/2164562にあります。