D3.js: 当我点击第二个 svg 元素时文本标签消失

Question

我是 D3.js 的新手，我在尝试制作可视化时遇到一个问题，我的显示器中有两个气泡图作为两个独立的 SVG 元素，如下所示：

SVG Elements

现在，问题是当我单击其中一个 SVG 元素时，第二个元素的文本标签消失，反之亦然，如下所示： On Clicking one of the charts

和： When I click on the SVG as well, it disappears

以上代码如下：

<script type="text/javascript">

            var svg = d3.select("#svg1"),
                margin = 20,
                diameter = +svg.attr("width"),
                g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

            var color = d3.scaleLinear()
                .domain([-1, 5])
                .range(["hsl(200,80%,80%)", "hsl(128,30%,90%)"])
                .interpolate(d3.interpolateHcl);

            var pack = d3.pack()
                .size([diameter - margin, diameter - margin])
                .padding(2);

            d3.json("flare.json", function(error, root) {
              if (error) throw error;

              root = d3.hierarchy(root)
                  .sum(function(d) { return d.size; })
                  .sort(function(a, b) { return b.value - a.value; });

              var focus = root,
                  nodes = pack(root).descendants(),
                  view;

              var circle = g.selectAll("circle")
                .data(nodes)
                .enter().append("circle")
                  .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
                  .style("fill", function(d,i) { 
                    console.log(d.data.name);
                    return d.data.color ? d.data.color : "ff99bb"; })
                  .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });

              var text = g.selectAll("text")
                .data(nodes)
                .enter().append("text")
                  .attr("class", "label")
                  .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
                  .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
                  .style("font-size", function(d){ return d.parent === root ? "12px" : "24px";})
                      .text(function(d) { return d.data.name; });

              var node = g.selectAll("circle,text");

              svg
                  .style("background", "#ffffff ") // change color of the square
                  .on("click", function() { zoom(root); });

              zoomTo([root.x, root.y, root.r * 2 + margin]);

              function zoom(d) {
                var focus0 = focus; focus = d;

                var transition = d3.transition()
                    .duration(d3.event.altKey ? 7500 : 750)
                    .tween("zoom", function(d) {
                      var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
                      return function(t) { zoomTo(i(t)); };
                    });

                transition.selectAll("text")
                  .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
                    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
                    .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
                    .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
              }

              function zoomTo(v) {
                var k = diameter / v[2]; view = v;
                node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
                circle.attr("r", function(d) { return d.r * k; });
              }
            });


///////////////////////////////////////////////////////SVG2///////////////////////////////////////////////////////////////                
// ------------------------------------------------------------------------------------------------
                var svg2 = d3.select("#svg2"),
                    margin2 = 20,
                    diameter2 = +svg2.attr("width"),
                    g2 = svg2.append("g").attr("transform", "translate(" + diameter2 / 2 + "," + diameter2 / 2 + ")");



                    var color2 = d3.scaleLinear()
                    .domain([-1, 5])
                    .range(["hsl(200,80%,80%)", "hsl(128,30%,90%)"])
                    .interpolate(d3.interpolateHcl);

                var pack2 = d3.pack()
                    .size([diameter2 - margin2, diameter2 - margin2])
                    .padding(2);

                d3.json("flare2.json", function(error, root2) {
                  if (error) throw error;

                  root2 = d3.hierarchy(root2)
                      .sum(function(d) { return d.size; })
                      .sort(function(a, b) { return b.value - a.value; });

                  var focus2 = root2,
                      nodes2 = pack(root2).descendants(),
                      view;

                  var circle2 = g2.selectAll("circle")
                    .data(nodes2)
                    .enter().append("circle")
                      .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
                      .style("fill", function(d,i) { 
                        console.log(d.data.name);
                            return d.data.color ? d.data.color : "#ddccff "; })
                      .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });

                  var text2 = g2.selectAll("text")
                    .data(nodes2)
                    .enter().append("text")
                      .attr("class", "label2")
                      .style("fill-opacity", function(d) { return d.parent === root2 ? 1 : 0; })
                      .style("display", function(d) { return d.parent === root2 ? "inline" : "none"; })
                      .style("font-size", function(d){ return d.parent === root2 ? "12px" : "24px";})
                          .text(function(d) { return d.data.name; });

                  var node2 = g2.selectAll("circle,text");

                  svg2
                      .style("background", "#ffffff ") // change color of the square
                      .on("click", function() { zoom(root2); });

                  zoomTo([root2.x, root2.y, root2.r * 2 + margin2]);

                  function zoom(d) {
                    var focus1 = focus; focus = d;

                    var transition2 = d3.transition()
                        .duration(d3.event.altKey ? 7500 : 750)
                        .tween("zoom", function(d) {
                          var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin2]);
                          return function(t) { zoomTo(i(t)); };
                        });

                    transition2.selectAll("text")
                      .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
                        .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
                        .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
                        .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
                  }

                  function zoomTo(v) {
                    var k = diameter2 / v[2]; view = v;
                    node2.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
                    circle2.attr("r", function(d) { return d.r * k; });
                  }
                });
</script>

我做错了什么？有人可以帮我改正吗？提前致谢！

Answer 1

我相信

.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })

对此行为负责。

Answer 2

dcluo 是正确的，问题出在注释的行上，但原因是以下代码

transition.selectAll("text")
   .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
    .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
    .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });

并且第二个 svg 中的相应代码选择性不够。

如果你想改变

selectAll("text")

到

selectAll("text.label")

第一种svg缩放方法和

selectAll("text.label2")

第二种svg缩放方式

这只会改变各个 svg 容器节点的不透明度。

selectAll 就像任何其他 javascript 选择方法一样 jQuery 的 $('input') 或普通 javascript document.getElementsByTagName("UL"). 文本实际上是一个标签名称，当它运行知道它应该只在父 svg 中运行时没有传递上下文。

看看https://bost.ocks.org/mike/selection/

D3.js: 当我点击第二个 svg 元素时文本标签消失

D3.js: Text labels dissapear when I click on the second svg element

javascript

svg

bubble-chart

data-visualization

d3.js