d3.js сложена диаграмма с разными цветами/легендами

Question

Я работаю над приложением, где каждый столбец может содержать разные типы тем.

Эта текущая демонстрация показывает обычную сложную диаграмму.

http://jsfiddle.net/LsMZp/

Но если я хотел установить различные темы/легенды/цвета каждого столбца. Каким будет лучший способ этого?

было бы случаем создания многомерного массива для массива цвета

var color = d3.scale.ordinal() 
    .range(["#20b2aa", "#fa8072", "#87ceeb", "#daa520", "#00bfff", "#dc143c", "#87cefa", "#90ee90", "#add8e6", "#d3d3d3"]); 


state.selectAll("rect") 
    .data(function(d) { 
     return d.ages; 
    }) 
    .enter().append("rect") 
    .attr("width", x.rangeBand())      
    .attr("y", function(d) { return y(d.y1); }) 
    .attr("height", function(d) { return y(d.y0) - y(d.y1); }) 
    .style("fill", function(d) { return color(d.name); })//; 
    .on("mouseover", function(d) { 
     //Get this bar's x/y values, then augment for the tooltip 
     var xPosition = parseFloat(d3.select(this.parentNode).attr("x")) + (x.rangeBand()/2) + 50; 
     var yPosition = parseFloat(d3.select(this).attr("y"))/2 + height/2; 
     //Update the tooltip position and value 
     d3.select("#tooltip") 
      .style("left", xPosition + "px") 
      .style("top", yPosition + "px")      
      .select("#value") 
      .text(d.name +" : " + d.hours); 
     //Show the tooltip 
     d3.select("#tooltip").classed("hidden", false); 
    }) 
    .on("mouseout", function() { 
     //Hide the tooltip 
     d3.select("#tooltip").classed("hidden", true); 
    })  

Answer 1

См this

Цветовая палитра В d3, встроенные цветовые палитры могут быть доступны через весы. Ну, даже в протовицах они были порядковыми масштабами, но не назывались так. В протовисе есть 4 встроенных цветовых палитры: d3.scale.category10(), d3.scale.category20(), d3.scale.category20b() и d3.scale.category20c().

Палитра типа d3.scale.category10() работает точно так же, как порядковый масштаб.

var p=d3.scale.category10(); 
var r=p.range(); // ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", 
         // "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] 
var s=d3.scale.ordinal().range(r); 
p.domain(); // [] - empty 
s.domain(); // [] - empty, see above 
p(0); // "#1f77b4" 
p(1); // "#ff7f0e" 
p(2); // "#2ca02c" 
p.domain(); // [0,1,2]; 
s(0); // "#1f77b4" 
s(1); // "#ff7f0e" 
s(2); // "#2ca02c" 
s.domain(); // [0,1,2]; 

d3.scale.category10(1); // this doesn't work 
d3.scale.category10()(1); // this is the way.