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的工作方法？我尝试过其他方法但没有成功;将该代码留在底部。

---

的 ANSWER

---

这是一个简单的<div id="dots"></div>：

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

我可能需要更新链接，但它现在使veiwBox按预期执行。我没有改变任何代码我并没有被混淆如何工作。显然，控制svg所需的属性并没有完全建立在D3.js中，这与我所相信的不同。

Answer 1

您设置width / height并在viewBox元素上设置svg属性意味着什么令人困惑。

height和width控制DOM svg内layout元素的维度，而svg内(300px, 500px)元件。

此处，SVG元素的大小为(-100, -100)，但坐标系内部从width开始，height和200为200，每个{{1}}。

至于使图表具有响应性，请查看viewBox sets the coordinate system以及如何在使用how nvd3 handles window resizes和viewBox调整大小时维护SVG元素内的坐标系。

Answer 2

在你的

中

JSFIDDLE

将<div id="dots"></div>更改为简单：

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

当我找到一个更好的方式来调用我发布的网站时，它可以在记事本++ 中使用。