積み重なった棒グラフの自動カラーピック

Question

は私が達成しようとしているjsfiddleの例です。代わりに手動ヘキサコードをentringの色範囲を渡す方法

http://jsfiddle.net/mwvhhe3o/

1. ？

Iはそれぞれ充填する

var colorRange = d3.scale.category20(); 
var colors = d3.scale.ordinal() 
      .range(colorRange.range()); 

、次いで、.attr("fill", colorRange);としてカラー値を通過しようとしました。しかし、成功しなかった。

2. 私は変数として凡例の値を渡しますが、ケース切り替えを自動化する方法はありますか？ケース切り替えの代替方法。

手動で名前を付ける凡例の名前が多すぎます。上記の課題を達成するために

legend.append("text") 
     .attr("x", width + 5) 
     .attr("y", 9) 
     .attr("dy", ".35em") 
     .style("text-anchor", "start") 
     .text(function(d, i) { 
     switch (i) { 
     case 0: return "Anjou pears"; 
     case 1: return "Naval oranges"; 
     case 2: return "McIntosh apples"; 
     case 3: return "Red Delicious apples"; 
     case 4: return "cherries"; 
     case 5: return "plum"; 
     case 6: return "grapes"; 
     case 7: return "melons"; 
     } 
    }); 

任意の方向や提案下記の例は、

Answer 1

http://jsfiddle.net/ve38098w/

便利ですあなたがする必要があるのは、新しいカラースケール

var colors = d3.scale.category20() 

准それぞれを作成することです果物の層のポイント

var keys = ["redDelicious", "mcintosh", "oranges", "pears", "cherries", "plum","grapes", "melons"] 

var dataset = d3.layout.stack()(keys.map(function(fruit) { 
    return data.map(function(d) { 
    return {x: parse(d.year), y: +d[fruit], name: fruit}; 
    }); 
})); 

データ結合中にフルーツ名を渡し始めます。

var rect = groups.selectAll("rect") 
    .data(function(d) { return d; }) 
    .enter() 
    .append("rect") 
    ... 
    .style("fill", d=> colors(d.name)) 

あなたはvar randomColor = colors('apple')よう"apple"に渡す最初の時間は、リンゴの色が割り当てられます。次回リンゴを渡すと、同じ色を取得します。

凡例では、前述のカラースケールを使用して矩形を作成するためにadata joinを実行します。

var legend = svg.selectAll(".legend") 
    .data(keys) 
    .enter().append("g") 
    .attr("class", "legend") 
    .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; }); 

legend.append("rect") 
    .attr("x", width - 18) 
    .attr("width", 18) 
    .attr("height", 18) 
    .style("fill", d=>colors(d)); 

legend.append("text") 
    .attr("x", width + 5) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .style("text-anchor", "start") 
    .text(d=>d);