круги не отображаются на SVG в соответствии с набором данных - PullRequest
Новая
       8

круги не отображаются на SVG в соответствии с набором данных

0 голосов
/ 01 января 2019

Я очень новичок в D3, я просто пытаюсь создать круги по очень маленькому 2-мерному массиву из 4 элементов, инициализированному в коде ниже, но отображается только один круг.не уверен почему?если кто-то может помочь указать, в чем проблема?

одно примечание: элементы массива dx и dy содержат элементы данных.Я подтвердил в console.log (dx) и console.log (dy): 

 //   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.если кто-то может помочь, почему это и как это исправить?

...