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

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 教程 - 斯科特·默里
• 思考连接 - Mike Bostok