Question

我在D3中制作一个图形，我试图在窗口调整大小时缩放图形的Y轴，不用缩放其中元素的大小。（而且我不想重绘图表）。

换句话说，我希望能够使用SVG缩放对象之间的距离，而无需更改对象的大小。

阅读this article的最后一部分并且似乎建议我可以，但我似乎无法正确了解详细信息。

这是我想要做的简化的代码： https://codepen.io/thesuperuser/pen/BmdNwz/

<symbol id="circle" width="20" height="20" preserveAspectRatio="none">
  <circle cx="10" cy="10" r=10></circle>
</symbol>

然后我使用此符号，并尝试使用d3

保留符号的大小

let svg2 = d3.select('svg.scaled')
svg2.selectAll('use')
  .data(data)
  .enter()
  .append('use')
  .attrs({
    class: 'circle',
    href: '#circle2',
    x: d => scale(d),
    y: '50%',
    height: dotR*2,
    width: dotR*2,
  })

这似乎只是复制了第一个示例中的行为，它会按照您期望viewBox和preserveAspectRatio的行为来缩放大小和距离。

Answer 1

如果为svg元素设置viewBox，它将缩放该viewBox，包括适合视口的所有内容。你想要的是相反的：一个svg元素，其中内容定位可以变化，但没有任何缩放。关键是相对（百分比）单位。

这是一种工作模式：

<svg width="100%" height="200">
  <symbol viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet">
    <circle id="circle" cx="10" cy="10" r="10" />
  </symbol>
  <use xlink:href="#circle" x="5%" y="50%" width="10%" height="20" />
  <use xlink:href="#circle" x="15%" y="50%" width="10%" height="20" />
  ...
</svg>

这样，当SVG的宽度发生变化时，使用元素的视口会改变它们的宽度，但不会改变它们的高度。在它们内部渲染的圆圈适合恒定的高度（只要视口宽度大于高）。 preserveAspectRatio="xMid..."和视口x和width会导致圆圈居中于10％，20％，...更改这些以根据需要定位圆圈。

这里有codepen来演示d3。

如何分别缩放SVG元素。

1 个答案: