Question

我正在研究d3的缩放功能，但我无法放大两个不同的文字（标签）。文本代码:(他们正在工作）

   var texts = canvas.selectAll("text")
              .data(nodes)
              .enter();


   texts.append("text")
        .attr("class", function(d) { return d.children ? "parent" : "child"; })
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; })
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
        .text(function(d) {return d.children ? "" : d.name;; });


   texts.append("text")
        .attr("class", function(d) { return d.children ? "parent" : "child"; })
        .attr("x", function(d) { return d.x ; })
        .attr("y", function(d) { return d.y + 20; })  // for not overlapping name and the title
        .attr("dy", ".45em")
        .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
        .text(function(d) {return d.children ? "" : d.title; });

缩放代码:(第二部分不起作用）

      function zoom(d, i) {
         var k = r / d.r / 2;
         x.domain([d.x - d.r, d.x + d.r]);
         y.domain([d.y - d.r, d.y + d.r]);

       var t = canvas.transition()
                      .duration(d3.event.altKey ? 7500 : 750);

     t.selectAll("text")
             .attr("x", function(d) { return x(d.x); })
             .attr("y", function(d) { return y(d.y); })
             .style("opacity", 0.15 });


     t.selectAll("text")
              .attr("x", function(d) { return x(d.x); })
              .attr("y", function(d) { return y(d.y) + 20 })
              .style("opacity", 0.15 });
      }

现在问题是如何保持位移（dy + 20;}）在text2部分完成，因为它们在缩放操作期间都重叠...我也使用变量而不是使用文本但它们都没有工作..任何帮助

如何在单个自定义缩放功能中选择多个svg文本

0 个答案: