Question

我对D3还是很陌生，我只是想根据下面的代码初始化的很小的2维4元素数组创建圆，但是只显示一个圆。不知道为什么？如果有人可以帮助指出问题所在？

一个注意事项：数组元素d.x和d.y携带数据元素。我已经在console.log（d.x）和console.log（d.y）中进行了验证：

 //   below is index.js file

         //this is array
           const myArr = [{x: 100 , y: 100},
                            {x: 130 , y: 150},
                            {x: 77 , y: 120},
                            {x: 90 , y: 49}];
            const svg = d3.select("body").append("svg")
                .attr("height" , 200)
                .attr("width" , 350);


     below is the code to handle svg selection , enter , update

             const circles = svg.selectAll("circle").data(myArr);

             //enter
            circles.enter().append("circle")
                 .attr("r" , 8);
                   //.attr("fill", "#00aa88");
            //update
                circles.attr("cx", function (d) { return d.x; })
                    .attr("cy", function (d) { return d.y;  });

                svg.selectAll("text")
                    .data(myArr)
                    .enter()
                    .append("text")
                    .text(function (d) {
                        return d.x + "," + d.y;
                    })
                    .attr("x", function (d) {
                        return d.x;
                    })
                    .attr("y", function (d) {
                        return d.y;
                    })
                    .attr("font-size", "15px")
                    .attr("fill", "white");
            //exit
                circles.exit().remove();

       this code displays on one circle. i have not added any axes yet.

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://d3js.org/d3.v5.js" type="text/javascript"></script>

        <title>Practise</title>
    </head>
    <body>
    <h2>PRACTICE</h2>
    <circle></circle>

    </body>
    </html>

    <script src="index.js"></script>

还有一个问题，如果我在头代码中调用此index.js不起作用，则仅当我在index.html的最底部调用此脚本文件时，此方法才有效。如果有人可以帮助您，请问这是为什么以及如何解决？

圆圈未按数据集显示在svg上

0 个答案: