d3.js - 有没有更好的方法来标记每个组？

Question

我想给每个组贴上标签有没有更好的方法呢？现在我正在这样做：

     const svgViewport = d3.select("body")
                .append("svg")
                .attr("width", 150)
                .attr("height", 150);

            let myData = [
                [{
                    x: 30,
                    y: 40
                },
                    {
                        x: 30,
                        y: 60
                    }
                ],
                [{
                    x: 70,
                    y: 40
                },
                    {
                        x: 70,
                        y: 60
                    }
                ]
            ];

            let labelData=[{name:"group1",x:20,y:30},
                {name:"group2",x:70,y:30}];

            const groups = svgViewport.selectAll(null)
                .data(myData)
                .enter()
                .append("g");

            const circles = groups.selectAll(null)
                .data(d => d)
                .enter()
                .append("circle")
                .attr("cx", (d) => d.x)
                .attr("cy", (d) => d.y)
                .attr("r", 10);


            const labels=svgViewport.selectAll("g").data(labelData).append("text").text((d)=>{return d.name;}).attr("x",(d)=>{return d.x})
                .attr("y",(d)=>{return d.y});

我想标记每组形状可以在不保留 labelData x 和 y 位置的情况下完成吗？

标签： d3.js