Question

我有一个由rects组成的d3.js图表，我希望这可以调整到任何宽高比。我通过添加以下代码完成了这项工作：

    var canvas = d3.select("#graph-canvas").append("svg:svg")
      .attr("viewBox", "0 0 " + viewWidth + " " + viewHeight)
      .attr("preserveAspectRatio", "none")

但我遇到的问题是我不希望文本随之延伸。我实际上喜欢文本保持不变的大小，而它的位置调整为随图表的尺寸移动。但如果文本不能保持不变的大小，我希望它至少保持其宽高比。

我已尝试在文本元素上设置宽高比，但这不起作用（我认为它是一个用于viewBox的属性。

    canvas.append("svg:text")
      .attr("x", function(d, i) {return xScale(i) + marginLeft;})
      .attr("y", "200")
      .attr("preserveAspectRatio", "xMinYMin")
      .attr("font-size", "100")
      .text("foo");

我也试过附加正常的div，但由于某些原因他们从未出现过..认为这可能是正确的策略。

Answer 1

这样的东西？

演示：http://jsfiddle.net/g8Ms6/

<svg
    version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="100%" height="100%">

    <rect
        x="10%" y="10%"
        width="80%" height="80%"
        stroke="black" stroke-width="1"
        fill="transparent"/>

    <svg
        x="10%" y="10%"
        width="80%" height="80%"
        viewBox="0 0 100 100" preserveAspectRatio="none">

        <rect x="20" y="15" width="30" height="20" fill="blue"/>
    </svg>

    <text
        x="90%" y="90%"
        font-size="20px" fill="#000"
        transform="translate(-50, 20)">
        Foo
    </text>
</svg>

有没有办法保持文本的宽高比固定而不是其他svg元素？

1 个答案: