6

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

以下是部分代码：

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 对象的属性发生了变化吗？为了使新图形成功可视化，我应该在点击功能中进行哪些更改？

谢谢！

4

1 回答 1

4

问题在于，onclick如果您选择svg元素下的所有圆圈并将它们与new_dataset. 您可能想要选择另一组圆元素并加入new_dataset这组圆。一种方法是在 下创建两个组svg，一个用于原始集，另一个用于 的圆圈new_dataset，另一种解决方案是为不同的圆圈组分配不同的类，并使用该类缩小每个选择。

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

于 2012-12-07T10:36:59.497 回答