[英]Changing color range in a d3 reusable donut chart depending on the number of data points
Using this reusable chart as a base: http://bl.ocks.org/nnattawat/9368297使用这个可重复使用的图表作为基础: http : //bl.ocks.org/nnattawat/9368297
I am trying to find a way to change the color range set based on the number of arcs (size), without having to rewrite the main donut().我试图找到一种方法来根据弧的数量(大小)更改颜色范围集,而不必重写主甜甜圈()。
For example, one donuts getData size would be 2 (having the colors green and gray), and another donuts getData size would be 3 (now remove gray and change colors to green, red, and yellow).例如,一个甜甜圈 getData 大小将为 2(具有绿色和灰色),另一个甜甜圈 getData 大小将为 3(现在移除灰色并将颜色更改为绿色、红色和黄色)。
I cannot remove the colors from donut() it seems, so I tried to find a way to maybe associate colors with specific data points, but I cannot figure that out with this template.我似乎无法从甜甜圈()中删除颜色,所以我试图找到一种方法将颜色与特定数据点相关联,但我无法用这个模板弄清楚。
Edit: Specifying code changes already done.编辑:指定代码更改已经完成。
I have 6 different getData functions, roughly as follows:我有 6 个不同的 getData 函数,大致如下:
var getFirstDonutData = function () {
var size = 2;
var data = [firstData1, firstData2];
var text = "";
d3.select("#data");
return data;
};
var getSecondDonutData = function () {
var size = 3;
var data = [secondData1, secondData2, secondData3];
var text = "";
d3.select("#data");
return data;
};
var getThirdDonutData = function () {
var size = 2;
var data = [thirdData1, thirdData2];
var text = "";
d3.select("#data");
return data;
};
Then 6 different of the following:然后有以下6种不同:
var twoPointDonut = donut()
.$el(d3.select("#twoPointDonut "))
.data(getFirstDonutData ())
.render();
var threePointDonut = donut()
.$el(d3.select("#threePointDonut "))
.data(getSecondDonutData ())
.render();
var otherTwoPointDonut = donut()
.$el(d3.select("#otherTwoPointDonut "))
.data(getThirdDonutData ())
.render();
The fill of the arc is determined by the color()
function on this line:圆弧的填充由此行上的color()
函数确定:
.style("fill", function(d) { return color(d.data.key); });
Instead of using a function, we can pick from an array of colors based on the index.我们可以根据索引从颜色数组中选择,而不是使用函数。 Modify the above line to read:将上面一行修改为:
.style("fill", function(d, i) { return color[i]; });
Now we need to change the list of available colors based on the number of data points (number of keys in the data object).现在我们需要根据数据点的数量(数据对象中的键的数量)更改可用颜色列表。 Above the color()
function, add:在color()
函数上方,添加:
var dataSize = Object.keys(getData()).length
var color = d3.scale.category20(); // This line was already here
Finally, we need to change the color
variable from a function to an array.最后,我们需要将color
变量从函数更改为数组。 The array will vary based on the dataSize
, so a switch
statement works great here.该数组将根据dataSize
变化,因此switch
语句在这里效果很好。 Replace the color definition:替换颜色定义:
var color;
switch (dataSize) {
case 2:
color = ['green' , 'gray'];
break;
case 3:
color = ['green', 'red', 'yellow'];
break;
}
This will give you green and gray when there are only two datapoints;当只有两个数据点时,这将为您提供绿色和灰色; and green, red, and yellow when there are 3 data points.当有 3 个数据点时,绿色、红色和黄色。 You can add more case
s for more amounts of data points.您可以为更多数据点添加更多case
。
Everything in one JSFiddle.一切都在一个 JSFiddle 中。
With two data points:有两个数据点:
With three data points:三个数据点:
Edit: Since you are using more than one chart and set of data on the same page, you will need to move this whole block to inside the Object.render()
function:编辑:由于您在同一页面上使用多个图表和一组数据,您需要将整个块移动到Object.render()
函数内部:
var dataSize = Object.keys(getData()).length;
var color;
switch (dataSize) {
case 2:
color = ['green' , 'gray'];
break;
case 3:
color = ['green', 'red', 'yellow'];
break;
}
and then change the dataSize
variable to get the length of the passed in data
object's keys:然后更改dataSize
变量以获取传入data
对象的键的长度:
var dataSize = Object.keys(data).length;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.