아래의 누적 막대 그림의

Question

에 대한 색상 선택을 자동으로 수행하는 것이 내 예제 jsfiddle입니다.

http://jsfiddle.net/mwvhhe3o/

1. 어떻게 수동으로 헥사 코드를 entring 대신 색상 범위를 전달하는 방법?

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 조인을 수행하십시오.

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);