как установить пузырь цвет D3 на основе порядковых значений определяется

Question

Я работаю на диаграмме, аналогичной http://bost.ocks.org/mike/nations/:

В этом я хочу, чтобы определить цвет и установить его для каждого по кругам значение области читается из json.

Код:

colorScale = d3.scale.ordinal() 
     .range(["#7479BC","#7C2833","#E7AC37","BDE7AE","E17250","ECF809","FC6E61"]);//Ffb400 


d3.json(data, function(d) { 

    //code ... 

var dot = svg.append("g") 
     .attr("class", "dots") 
    .selectAll(".dot") 
     .data(interpolateData(2000)) 
    .enter().append("circle") 
     .attr("class", "dot") 
     //.style("fill", function(d) { return colorScale(color(d)); }) 
     .style("fill", function(d) { return color(d.region); }) 
     .call(position) 
     .sort(order); 

})

Мой файл JSON является

[ 
{ 

    "name":"Search&Navigator", 
    "region":"IP&Science", 
    "checkins":[[2000,100],[2001,200],[2002,300],[2003,275],[2004,222],[2005,280],[2006,281],[2007,400],[2008,55],[2009,300]], 
    "teamsize":[[2000,10],[2001,7],[2002,7],[2003,12],[2004,5],[2005,3],[2006,10],[2007,12],[2008,12],[2009,10]], 
    "Checkintimes":[[2000,40],[2001,50],[2002,60],[2003,50],[2004,40],[2005,30],[2006,30],[2007,35],[2008,30],[2009,30]] 
}, 

{ 

    "name":"Cobalt", 
    "region":"CORP", 
    "checkins":[[2000,121],[2001,339],[2002,124],[2003,255],[2004,325],[2005,460],[2006,177],[2007,221],[2008,122],[2009,120]], 
    "teamsize":[[2000,2],[2001,2],[2002,2],[2003,2],[2004,2],[2005,2],[2006,2],[2007,2],[2008,2],[2009,3]], 
    "Checkintimes":[[2000,20],[2001,40],[2002,60],[2003,50],[2004,40],[2005,30],[2006,35],[2007,30],[2008,30],[2009,30]] 
}, 

    "name":"Test", 
    "region":"CORP", 
    "checkins":[[2000,121],[2001,339],[2002,124],[2003,255],[2004,325],[2005,460],[2006,177],[2007,221],[2008,122],[2009,120]], 
    "teamsize":[[2000,2],[2001,2],[2002,2],[2003,2],[2004,2],[2005,2],[2006,2],[2007,2],[2008,2],[2009,3]], 
    "Checkintimes":[[2000,20],[2001,40],[2002,60],[2003,50],[2004,40],[2005,30],[2006,35],[2007,30],[2008,30],[2009,30]] 
} 
] 

так на основе значения области я хотел бы установить соответствующий цвет. Итак, все «CORP» должны иметь тот же цвет, отличный от «IP & Science». в настоящее время он устанавливает все цвета как черные.

Answer 1

Возможно, потому что вы звоните color, а не colorScale?

Корректировка опущенной фигурной скобки перед последним объектом в ваших данных. Я смог создать круг в this jsfiddle с данными, используя следующий код.

.append("circle") 
    .style("fill", function (d) { return colorScale(d.region); }) 
    .attr('r', 5) 
    .attr('cy', function (d, i) { return y(i); }) 
    .attr('cx', w/2);