Question

我在<circle>内有<g>的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")

我怎样才能做到这一点？

Answer 1

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

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

检查代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

PS：这将不在D3 v4（see here）上工作。

如何给同一个班级

1 个答案: