Как дать те же классы

Question

У меня есть SVG элемент <circle> внутри <g>, и я хочу, чтобы дать каждой окружности тег класс как это:

<g class="parent"> 
    <circle class="circle_0"></circle> 
    <circle class="circle_0"></circle> 
    <circle class="circle_0"></circle> 
    <circle class="circle_0"></circle> 
    </g> 
    <g class="parent"> 
    <circle class="circle_1"></circle> 
    <circle class="circle_1"></circle> 
    <circle class="circle_1"></circle> 
    <circle class="circle_1"></circle> 
    </g> 
    <g class="parent"> 
    <circle class="circle_2"></circle> 
    <circle class="circle_2"></circle> 
    <circle class="circle_2"></circle> 
    <circle class="circle_2"></circle> 
    </g> 

число после circle_ исходит от порядка его родителя <g>, но каждый родитель имеет одно и то же имя класса.

Я создаю их, как это и сейчас, каждый <circle> имеет один и тот же класс:

var g = svg.append("g") 
var parentElement = g.selectAll(".parent") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "parent"); 

parentElement.selectAll(".circle") 
    .data(function(d,i) { return d; }) 
    .enter().append("circle") 
    .attr("class", "circle") 

Как я могу добиться этого?

Answer 1

Поскольку вы используете D3 v3 вы можете использовать третий аргумент, который является индекс родителя, чтобы установить классы:

.attr("class", function(d,i,p){ 
    return "class_" + p; 
}); 

Проверьте сниппет:

var data = [[1,1,1,1],[1,1,1,1],[1,1,1,1]]; 
 
var svg = d3.select("body"); 
 
var g = svg.append("g") 
 
var parentElement = g.selectAll(".parent") 
 
    .data(data) 
 
    .enter().append("g") 
 
    .attr("class", "parent"); 
 

 
parentElement.selectAll(".circle") 
 
    .data(function(d,i) { return d; }) 
 
    .enter().append("circle") 
 
    .attr("class", function(d,i,p){ 
 
    console.log("circle_" + p); 
 
    return "circle_" + p; 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

PS: это будет не Работает на D 3 v4 (see here).