Question

我想绘制一系列圆圈。然后，对于每个圆，我想用以下半径定义其中的三个：[r，r / 2，r / 4]。我该怎么做？

我已经尝试过这段代码，但它不起作用：

var svg = d3.select("#chart").append("svg")
var grupos = svg.append("g")
    .selectAll("g")
    .data([1,2,4])
    .enter().append("g")
    .attr("class", function(d) { return("dots" + d); })
    .selectAll(".dot")
        .data(getData(0))
        .enter().append("circle")
        .attr("id", function(d) { return d.party})
        .attr("class", "dot")
        .style("fill", function(d) { return co(d); })
        .call(position)
        .sort(order)

Answer 1

如果您要嵌套附加的元素，则需要为第一个.data调用提供一个数组数组。然后，在此之后，您可以像下面的嵌套数据调用一样引用它。

以下示例可以帮助您进一步了解。

Mike的nested selections页面也可以为您提供帮助。

＆＃13;

var svg = d3.select("#chart").append("svg")
                             .attr("width", 400)
                             .attr("height", 300),
    colours = d3.scale.category10(),
    r = 20,
    
    data = [
             [ 1, 2, 4],
             [ 2, 4, 8]
           ];

svg.append("g").selectAll("g.circles")
                 .data(data)
               .enter().append("g")
                 .attr("class", "circles")
                 .selectAll("circle.dot")
                   .data(function(d) { return d; })
                 .enter().append("circle")
                   .attr("class", function(d) { return "dot " + d; })
                   .attr("cx", function(d, i, j) { return 50 + i * 50; })
                   .attr("cy", function(d, i, j) { return 50 + j * 50; })
                   .attr("r", function(d) { return r / d; })
                   .attr("fill", function(d, i , j) { return colours(r/d); });

＆＃13;

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

＆＃13;

Answer 2

您应该能够将以下内容修改为嵌套组;它与在g文档中嵌套svg组基本相同。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Nested circles</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">

          var radii = [4, 2, 1];
          var colors = ["red", "green", "blue"];

          var svg = d3.select("body")
                      .append("svg")
                      .attr("id", "foo")
                      .attr("width", 200)
                      .attr("height", 200);

          var bar = svg.append("g").attr("id", "bar");

          bar.selectAll("circle")
             .data(radii)
             .enter()
             .append("circle")
             .attr("id", function(d, i) { return "circle_" + i; })
             .attr("r", function(d) { return 20*d; })
             .attr("fill", function(d, i) { return colors[i]; })
             .attr("cx", 100)
             .attr("cy", 100);

        </script>
    </body>
</html>

如何在d3上访问组内组中的圆的属性

2 个答案: