D3如何放大保留在SVG矩形内的SVG文本？

我想放大一个里面有文本的矩形。我使用getBBox()来确定文本的大小，然后根据该文本的大小绘制一个矩形。从那里我尝试添加缩放/平移功能。D3如何放大保留在SVG矩形内的SVG文本？

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

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

我不知道我是否应该缩放矩形或内部的其他文字。我试图玩弄重绘功能，看看我是否可以用当前宽度的文本转换大小，所以我会更新我的jsfiddle，如果我有任何进展。如果任何人都可以给我一些建议，我会很感激。

来源

2013-07-05 aug

在IE中正常工作（纠正后删除多余的' gilly3

嗯，我没有尝试在Firefox中...我不知道为什么它不在那里工作，但我会看看如果我能弄明白。 – aug

您需要对和进行样式设置，使其宽度为100％，高度为100％，并将外部

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

的变化是需要这才能起作用：

IE：

显然，我需要删除多余的<svg>元素我在追加时顶部。

火狐：

显然，你需要设置SVG的width和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-08 18:02:57 aug

D3如何放大保留在SVG矩形内的SVG文本？

回答

相关问题