如何上相同的课程答案

【问题标题】：How to give same classes如何上相同的课程
【发布时间】：2017-01-05 05:11:51
【问题描述】：

我在<g> 内有<circle> 的svg 元素，我想给每个圆圈标签一个这样的类：

 <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")

我怎样才能做到这一点？

【问题讨论】：

你试过什么？在 SO 上，您通常会尝试自己并在遇到困难时提出问题。如果您的代码不起作用，请将其发布到您的问题中。
除了@Paul 所说的之外，我假设您已经有了创建组和圈子的代码，而您的问题只是设置类...既然如此，请发布你的代码。
@PaulLeBeau 对此感到抱歉。我只是添加了我创建它的方式
另一个重要信息：您使用的是 d3 v3 还是 v4？
@GerardoFurtado 我正在使用 v3

标签： d3.js svg

【解决方案1】：

由于您使用的是 D3 v3，您可以使用 第三个参数（即父级索引）来设置您的类：

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

检查sn-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;
  })

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

PS：这将不适用于 D3 v4 (see here)。

【讨论】：

再次感谢 Gerardo！哇，这很容易。我什至不知道还有第三个参数。