如何使用d3.js创建响应性svg

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="0 0 960 500“)，则不需要调整任何子元素的大小。

Answer 2

不要硬编码一个宽度，而要使它依赖于svg的父级的宽度。例如。

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)等。

如果使用axis，请将范围设置为新的宽度值，并再次调用axis函数(即svg.select(".x.axis").call(xAxis))。如果您正在使用缩放或其他类似功能，您将不得不再次调用它们。

Answer 3

Hi SVG它自己建议“可销售的矢量图形”，因此它是自然响应的，因此您只需要使用"viewBox"属性的<svg>元素。用你的视角。