我对编程和 D3 非常陌生,我有一个基本问题(我认为),但我找不到解决方案。
我创建了一组圆圈,它们一起代表一个议院(立法厅)。
现在,我想根据不同的数据集更改圆圈的颜色。
我尝试应用不同的类或样式,但无法选择正确的圆圈数。
这是代码。
svg.selectAll("g")
.data(grupos)
.enter().append("g")
.attr("transform", function (d,i) { return "translate(400,380) rotate(" + -1* (i * 5) + ")";})
.selectAll("circle")
.data(circulos)
.enter().append("circle")
.attr("cy", 0)
.attr("cx", function (d,i) {return (i+3) * 20;})
//change the size of circles gradually
.attr("r", function (d,i) {return (Math.pow((i+1),1/3)*2);});
查看项目
http://jsfiddle.net/ploscri/JrRdc/
有人可以帮忙吗?
最佳答案
将一半圆圈涂成蓝色:
svg.selectAll("circle")
.attr("fill", function(d, i){ return i < 190 ? 'blue' : 'red'; })
如果您只是想显示不同的投票总数、男性与女性的数量或其他比例,只需更改 190。
要以更复杂的方式根据不同的数据集更改圆圈的颜色:我建议将数据集组合在一起形成一个对象数组,其中每个条目代表一个立法者。将该数据绑定(bind)到您的圆圈,您可以根据立法者的属性轻松调整圆圈的大小、位置和颜色。
关于javascript - 如何将类应用(和更改)到已存在的 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17693130/