Javascript 使用力导向缩放问题

我已经生成了一个D3可视化（一个力定向图），需要缩放和平移。然而，当涉及到缩放时，我有两个问题，我找不到任何合适的例子来说明如何克服这些问题：

第一个问题是，我遵循了我能找到的所有关于缩放的示例，包括添加分组和添加矩形，以确保整个区域可缩放。如果我将矩形的样式设置为略不透明的蓝色，则在缩小时会得到如下所示的SVG：

问题是，当我将鼠标放在蓝色矩形区域上时，我可以完全放大/缩小。问题是我希望它是完全不透明的，这意味着当我向右缩小时，很容易将光标放在这个框之外，然后你就无法放大。有没有一种方法可以使SVG本身可缩放或拾取这些事件

以下是我如何生成各种图层和缩放功能：

function zoomed() {      
  group2.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

svg = d3.select(target)
        .attr("pointer-events", "all")
        .append("svg");

group = svg.append('svg:g')
           .call(d3.behavior.zoom().on('zoom', zoomed))
           .on("dblclick.zoom", null);

group2 = group.append("g");
rect = group2.append('svg:rect')
          .style("opacity", 0.3)
          .attr('width', width)
          .attr('height', height);

我遇到的第二个问题是，我试图根据这个示例自动调整文本大小。然而，当我尝试这一点时，我似乎得到的文本呈现非常糟糕。它似乎受到以下影响：

• 难读
• 不包含在圆圈内
• 因为太小，整个东西都被压缩了（图2）

我认为SVG可以处理这个问题，我知道一些字体大小可能会变小，但如果放大，这不都会自行解决吗

---

我有一个JSFiddle要演示。

我还没有设法解决我的第一个问题（关于缩放框），但是我设法找到了文本呈现问题

---

这实际上是因为每个圆/节点都有一个笔划属性来提供白色边框。这也适用于文本元素，当字体非常小时，笔划比文本的整体填充大得多。从文本元素中删除笔划可确保它们即使非常小也能呈现。

对于您的第一个问题，（因此不会缩小）？@标记这是一个非常好的观点，尽管它会增加缩放比例以使其在缩小时展开。

var texts = planets.append("text")
                .text(function(d) { return d.name; })
                .style("font-size", "24px") // initial guess
                .style("font-size", function(d) { 
                  return Math.min( 2 * d.size, (2 * d.size - 8) / this.getComputedTextLength() * 24) + "px"; 
                })
                .attr("dx", function(d) { return -d.size; })
                .attr("dy", ".35em")
                .style("fill", "white");