Цветовая гамма не работает должным образом в D3/JavaScript

Question

Im используя цветовую гамму:

var color = d3.scale.category10(); 

Im, используя это, чтобы цвет края раскладкой силы графа в соответствии с их значением

var links = inner.selectAll("line.link") 
    .style("stroke", function(d) { return color(d.label); }); 

Теперь я нужна «легенда», чтобы показать пользователю, что означает каждый цвет:

edgesArray = []; 
    edgesArrayIndex = []; 
    for (i=0;i<data.edges.length;i++) { 
    if(!edgesArray[data.edges[i].name]) 
    { 
    edgesArray[data.edges[i].name]=1; 
    edgesArrayIndex.push(data.edges[i].name);  
    } 
} 

var colourWidth = 160; 
var colourHeight = 25; 

for(i=0; i<edgesArrayIndex.length; i++){ 

if (edgeColour == true){  
svg.append('rect') 
    .attr("width", colourWidth) 
    .attr("height", colourHeight) 
    .attr("x", Marg*2) 
    .attr("y", Marg*2 + [i]*colourHeight) 
    .style("fill", color(i)) 
    ; 
svg.append("text") 
    .attr("x", Marg*3) 
    .attr("y", Marg*2 + [i]*colourHeight + colourHeight/2) 
    .attr("dy", ".35em") 
    .text(color(i) + " : " + data.edges[i].name); 
} 
//console.log(edgesArrayIndex); 
} 

Теперь все работает нормально. Но цвета все не так. Голые со мной здесь. Когда я прикрепляю цвета к графику, первые 6 цветов присоединяются к краям, так как существует 6 различных типов ребер.

Но когда я применяю цветовую гамму к 6 'rects', я добавляю к SVG его, как если бы первые 6 цветов массива цветовой гаммы были израсходованы при применении к краям, и когда я делаю цикл for начиная с цвета (0), он на самом деле дает мне цвет в цвете (5) (как только 0).

Например, ive получил красный, синий, зеленый, белый, черный, розовый, оранжевый, желтый, индиго, аква. Мои края - красный, синий, зеленый, белый, черный, розовый , и теперь, когда я хочу применить масштаб к прямоугольникам, которые я сделал, я ожидал бы, что прямоугольники имеют одинаковые значения - красный, синий, зеленый, белый , черный, розовый.

Но они на самом деле имеют: оранжевый, желтый, индиго, аква, красный, синий.

Они начинаются с цвета [5] и, как если бы они обертываются к началу и возвращаются к красным, синим и так далее.

Извините, если это не имеет смысла, я попытался изо всех сил описать, что происходит. Вероятно, я кое-что допустил ошибку, или я не понимаю правильные значения в D3.

В любом случае, есть ли у кого есть идеи?

Answer 1

Вы используете две разные части данных для цветовой шкалы - сначала метку, а затем имя. По определению это даст вам разные цвета (разные входы сопоставляются с различными выходами, насколько это возможно, с учетом выходного диапазона).

Чтобы получить одинаковые цвета, переходите к тем же атрибутам, например. метки (если я правильно понял вашу структуру данных):

svg.append('rect') 
    .style("fill", color(data.edges[i].label)) 

Answer 2

этот вопрос помогла мне -

d3.scale.category10() not behaving as expected

в основном вы должны поставить домен на шкале. Таким образом, вместо

var color = d3.scale.category10(); 

Изменить его:

var color = d3.scale.category10().domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);//-colour scale