1

我正在研究类似于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”不同的相同颜色。目前它将所有颜色设置为黑色。

4

1 回答 1

0

可能是因为你打电话color而不是colorScale？

更正数据中最后一个对象之前省略的大括号我可以使用下面的代码在这个 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);
于 2013-11-14T11:49:48.607 回答