Question

我需要在网页中使用SVG根据窗口大小动态调整大小，或者使用多个硬编码的宽度和高度。

我正在使用D3库。

我的问题是，不仅仅是需要不同画布大小的SVG标记，还需要调整大小或是rect标记和g标记等子元素。完全重新渲染

如何做到这一点？

我意识到我可以通过

收听窗口调整大小

d3.select(window).on('resize', resize);

使用我的调整大小功能执行所有逻辑，但确切地选择（或计算）的方式和宽度/高度超出我的范围

<div class="svg-container">
<svg width="960" height="500" preserveAspectRatio="xMidYMid" class="svg-content">
   <defs>
     <clipPath id="clip-upper">
      <rect id="rect-clip-upper" width="960" height="305" x="-480" y="-305">      </rect>
</clipPath>
<clipPath id="clip-lower">
  <rect id="rect-clip-lower" width="960" height="195" x="-480" y="0"></rect>
</clipPath>
</defs>
   <g clip-path="url(#clip-upper)" transform="translate(480,305)"></g>
   <g clip-path="url(#clip-lower)" transform="translate(480,305)"></g>
 </svg>

Answer 1

如果将viewBox添加到svg元素，例如viewBox =＆＃34; 0 0 960 500＆＃34;你不会需要调整任何孩子的大小。

Answer 2

不是硬编码宽度，而是取决于svg父级的宽度。 E.g。

width = svgParent[0][0].clientWidth - margin.left - margin.right;
height = svgParent[0][0].clientHeight - margin.top - margin.bottom;

确保所有宽度，高度和位置都是根据数据计算的（在这种情况下d3将处理它）或以某种方式与宽度/高度相关。然后，在调整大小处理程序中，只需在要调整大小的所有元素上调用child.attr("width", newWidth)，child.attr("x", newX)等。

如果您正在使用轴，请将范围设置为新的宽度值并再次调用轴功能（即svg.select(".x.axis").call(xAxis)）。如果您使用缩放或其他类似功能，则必须再次呼叫它们。

Answer 3

你好SVG它自己建议＆＃34;可售的矢量图形＆＃34;所以它本质上是响应性的，所以你只需要使用<svg>元素的＆＃34; viewBox＆＃34; 属性。用你的观点来看待。

如何使用d3.js

3 个答案: