Как применять (и изменять) классы к уже существующим элементам SVG

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'; }) 

Если вы просто пытаетесь показать различные итоги голосования, число мужчин v женщин, или иной пропорции, просто изменить 190.

.

Чтобы изменить цвет кругов на основе разных наборов данных более сложным образом: я бы предложил объединить массивы данных в массив объектов, где каждая запись представляет собой один законодатель. Привяжите эти данные своим кругам, и вы можете легко изменить размер, положение и цвет круга на основе свойств законодателя.