Question

我在编程和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/

有人可以帮忙吗？

Answer 1

将一半的圆圈着色为蓝色：

svg.selectAll("circle")
   .attr("fill", function(d, i){ return i < 190 ? 'blue' : 'red'; })

如果你只是试图显示不同的投票总数，男性和女性的比例，或其他比例，只需更改190.

要以更复杂的方式更改基于不同数据集的圆的颜色：我建议将数据集合并到一个对象数组中，其中每个条目代表一个立法者。将这些数据绑定到您的圈子，您可以根据立法者的属性轻松更改圈子的大小，位置和颜色。

如何将类应用（和更改）到已存在的SVG元素

1 个答案: