D3.js 如何根据定义的序数值在D3中设置气泡颜色
我正在制作一张类似于以下内容的图表: 在本文中,我想定义颜色,并根据从json读取的区域值为每个圆设置颜色 代码是:D3.js 如何根据定义的序数值在D3中设置气泡颜色,d3.js,bubble-chart,D3.js,Bubble Chart,我正在制作一张类似于以下内容的图表: 在本文中,我想定义颜色,并根据从json读取的区域值为每个圆设置颜色 代码是: colorScale = d3.scale.ordinal() .range(["#7479BC","#7C2833","#E7AC37","BDE7AE","E17250","ECF809","FC6E61"]);//Ffb400 d3.json(data, function(d) { //code ... var dot = svg.appen
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]]
}
]
因此,基于区域值,我想设置适当的颜色。因此,所有的“公司”都应该具有与“知识产权与科学”不同的相同颜色。目前,它正在将所有颜色设置为黑色 可能是因为您正在调用
color
而不是colorScale
更正数据中最后一个对象之前省略的花括号,我能够使用下面的代码用数据创建一个圆圈
.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);
最好使用预定义的颜色比例,例如
d3.scale.category20()
。JSON中有错误。你需要一个{
在的“名字”之前:“”,
谢谢克里斯托弗。我会留意的。