Question

我正在制作一个气泡图，我已经在每个圈子上附加了一个点击事件。单击圆圈时，气泡图将替换为表示更详细信息的新图表。

以下是代码的一部分：

svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return scaleX(d[2]);
               })
               .attr("cy", function(d) {
                    return scaleY(100 - d[1]);
               })
               .attr("r", function(d) {
                    return d[1];
               })
               .attr("fill", "#4eb157")
               .attr("stroke", "#00c4d4")
               .attr("stroke-width", function(d) {

                    return d[1]*(1-d[2]/100)*1.5;

               })
               .on("click", function ()
                                    {


                                       svg.selectAll("circle")
                                       .data(new_dataset)
                                       .enter()
                                       .append("circle")
                                       .attr("cx", function(d) {
                                            return scaleX(d[2]);
                                       })
                                       .attr("cy", function(d) {
                                            return scaleY(100 - d[1]);
                                       })
                                       .attr("r", function(d) {
                                            return d[1];
                                       })
                                       .attr("fill", "#4eb157")
                                       .attr("stroke", "#00c4d4")
                                       .attr("stroke-width", function(d) {

                                            return d[1]*(1-d[2]/100)*1.5;

                                        });             


                                    svg.selectAll("text")
                                       .data(new_dataset)
                                       .enter()
                                       .append("text")
                                       .text(function(d) {
                                            return d[0];
                                       })
                                       .attr("x", function(d) {
                                            return scaleX(d[2]);
                                       })
                                       .attr("y", function(d) {
                                            return scaleY(100 - d[1]);
                                       })
                                       .attr("font-family", "sans-serif")
                                       .attr("font-size", "11px")
                                       .attr("fill", "red");
                                    });

当我点击圆圈时问题就出现了，整个图表消失了，但没有可见的新图表。我发现在执行on click函数期间，svg对象已从其初始状态发生了变化，特别是某些属性（如baseURI，clientHeight，clientWidth等）不再设置，即使它们是在最初创建svg时宾语。这是我用来创建svg对象的代码：

var svg = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("height", h);

我的问题是为什么新图表没有出现？这是因为svg对象的属性发生了变化吗？我应该在点击功能中更改什么才能使新图形成功显示？

谢谢！

Answer 1

问题是，在onclick事件中，您选择了svg元素下的所有圈子并将其与new_dataset连接起来。您可能想要选择另一组圆形元素并将new_dataset加入此圆圈组。一种方法是在svg下创建两个组，一个用于原始集，另一个用于new_dataset的圆，另一个解决方案是将不同的类分配给不同的圆组并缩小每个选择使用班级。

在以下链接中，您可以找到有关加入机制的更清晰的解释：

在点击事件中访问D3 SVG对象

1 个答案: