javascript - d3js svg viewBox 不允许计算 window.innerWidth - 170

Question

我知道我的错误在于重新调整大小 .attr("width", x)或者不计算 .attr("viewBox", "0 0 " + x + " " + y ) 中的宽度。

• 如何修复我的代码或者是否有其他可行的解决方案？

工作代码:(初始页面加载)

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth - 170 || e.clientWidth - 170 || g.clientWidth - 170;
    y = w.innerHeight || e.clientHeight|| g.clientHeight;

var svg = d3.select("body").append("svg")
    .attr("width", x)
    .attr("height", y)
    .attr("class", "bubble")

结果为window.innerWidth -170

<小时/>

当更改为 viewBox 时，计算没有响应。

无响应代码:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth - 170 || e.clientWidth - 170 || g.clientWidth - 170;
    y = w.innerHeight || e.clientHeight|| g.clientHeight;

var svg = d3.select("body").append("svg")
    .attr("viewBox", "0 0 " + x + " " + y )
    .attr("preserveAspectRatio", "xMidYMid meet")
    .attr("class", "bubble")

结果是window.innerWidth

如何让 viewBox 允许计算/减去 170px？

是否有调整 svg 大小的有效替代方法？我尝试过其他方法，但没有成功；将该代码留在底部。

<小时/>

答案

<小时/>

这是<div id="dots"></div>简单来说:

<svg id="dots" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

我可能需要更新链接，但它现在使 veiwBox 按预期工作。我没有更改任何代码，我对它应该如何工作并不感到困惑。控制 svg 所需的属性显然没有完全内置到 D3.js 中，这与我所相信的不同。

Answer 1

您对 svg 元素上设置 width/height 和设置 viewBox 属性的含义感到困惑。

height 和 width 控制 DOM layout 内 svg 元素的尺寸，而viewBox sets the coordinate system在 svg 元素内。

此处，SVG 元素的大小为 (300px, 500px)，但坐标系内部从 (-100, -100) 开始，并具有 >宽度和高度各为200和200。

至于使图表响应式，请查看 how nvd3 handles window resizes以及如何在调整大小时使用 viewBox 维护 SVG 元素内部的坐标系和 preserveAspectRatio .