svg - D3 如何放大位于 SVG 矩形内的 SVG 文本？

Question

我正在尝试放大内部附加了文本的矩形。我正在使用 getBBox()确定文本的大小，然后根据该文本的大小绘制一个矩形。从那里我尝试添加缩放/平移功能。

不幸的是，当您放大时，文本和矩形的缩放方式不同。当您放大时，文本会缩放太多，并且不会停留在矩形内。实际上，矩形似乎只会以默认缩放级别封装文本。

http://jsfiddle.net/9cWWW/1/

我不确定是否应该将矩形或内部的文本缩放到另一个。我正在尝试使用重绘功能来查看是否可以使用文本的当前宽度来转换大小，因此如果有任何进展，我将更新我的 jsfiddle。如果有人可以就此给我一些建议，我将不胜感激。

Answer 1

这是新的 JSFiddle:http://jsfiddle.net/9cWWW/6/

为此需要进行的更改:

IE:

显然我需要删除额外的 <svg>附加时我在顶部的元素。

火狐:

显然你需要设置 width和 height SVG 如下所示:

var svg = d3.select("body").append("svg:svg").attr("height","100%").attr("width","100%")
            .call(d3.behavior.zoom().on("zoom", redraw))
              .append("g");

非常感谢 gilly3 告诉我这个。

Chrome :

显然，您需要确保指定 font-size属性:

var text = svg.append("svg:text")
    .attr("x", 480)
    .attr("y", 250)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .attr("font-size", nodeFontSize + "px") //<-- added
    .text("This is the text I want to make zoomable");

希望这对大家有帮助!