Question

我是使用D3的新手，我尝试通过分成n个片段将圆圈均匀地放在另一个圆圈周围。问题是即使coords [0]存在，它也不会绘制第一个圆。相反，它开始在coords [1]并继续。这是什么原因以及如何解决它？

main.html中

<!doctype html>
<html>
    <head>
        <title>A Circle</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.1/math.min.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="circle.js"></script>
    </body>
</html>

circle.js

    var w = 500;
    var h = 500;
    var n = 10;
    var r = h/2-20;
    var coords = [];

    for (var i = 0; i<n; i++)
    {
        var p_i = {};
        p_i.x = w/2+r*math.cos((2*math.pi/n)*i);
        p_i.y = h/2-r*math.sin((2*math.pi/n)*i);
        coords.push(p_i);
    }


    var svg = d3.select('body') //SVG Canvas
        .append('svg')
        .attr('width', w)
        .attr('height', h);

    var circle = svg.append('circle') //Draw Big Circle
        .attr('cx', w/2)
        .attr('cy', h/2)
        .attr('r', r)
        .attr('fill', 'teal')
        .attr('stroke', 'black')
        .attr('stroke-width', w/100);

    var center = svg.append('circle') //Construct Center
        .attr('cx', w/2)
        .attr('cy', h/2)
        .attr('r', r/50)
        .attr('fill', 'red')
        .attr('stroke', 'black')
        .attr('stroke-width', w/100);

    var approx_pts = svg.selectAll('circle')
        .data(coords, function(d)
              {
                  return this.id;
              })
        .enter()
        .append('circle')
        .attr('cx', function(d)
              {
                  return d.x;
              })
        .attr('cy', function(d)
              {
                  return d.y;
              })
        .attr('r', w/100)
        .attr('fill', 'black');

Answer 1

执行此操作时，SVG中已有圆圈：

var approx_pts = svg.selectAll('circle')

因此，“输入”选择的元素少于数据数组。

解决方案：只需使用selectAll(null)：

var approx_pts = svg.selectAll(null)

通过这种方式，您可以确保输入选择包含数据数组中的所有元素。当然，这种方法可以避免在将来创建“更新”和“退出”选项。

如果您打算使用“更新”和“退出”选项，可以按班级选择：

var approx_pts = svg.selectAll(".myCircles")

当然，当您在输入选择中附加这些圆圈时，不要忘记设置该类。

d3在追加圆

1 个答案: