2

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

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

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

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

4

1 回答 1

3

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

为此需要进行的更改：

IE：

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

火狐：

显然您需要设置 SVG 的widthand height，如下所示：

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

非常感谢gilly3告诉我这些。

铬合金：

显然，您需要确保指定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");

希望这对大家有帮助！

于 2013-07-08T18:02:57.997 回答