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

我正在使用d3的缩放功能，但无法缩放两个不同的文本（标签）。 文本代码：（他们正在工作）

缩放代码：（第二部分不工作）

---

现在的问题是如何保持text2部分中的位移（d.y+20；}），因为它们在缩放操作期间重叠。。。我也使用变量而不是文本，但它们都不起作用。。有什么帮助吗？

你能做一把小提琴吗？嗨，这是代码，但它不起作用（这是我第一次使用jfiddle）

   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 });
      }