html - d3.js 设置属性为百分比而不是像素

Question

在 d3.js 中创建对象时，这是我的常规方法:

var svgcanvas = d3.select("body")
                    .append("svg")
                    .attr("width", 100)
                    .attr("height", 100)
                    .append("circle")
                    .attr("cx", 50)
                    .attr("cy", 50)
                    .attr("r", 10)
                    .attr("fill", "red")

最终创建了一个完全静态的对象。我想要做的是有这样的东西(注意百分比):

var svgcanvas = d3.select("#tweets")
                    .append("svg")
                    .attr("width", 100%)
                    .attr("height", 100%)
                    .append("circle")
                    .attr("cx", 50%)
                    .attr("cy", 50%)
                    .attr("r", 10)
                    .attr("fill", "red")

但是这似乎不可能。

当手动创建 svg 元素时，这样做就像一个魅力。这是一个例子 http://cssdeck.com/labs/jxda8sth

对于这样一个简单的解决方案，挖掘自动缩放脚本对我来说是一个禁忌。所以我想问:是否可以使用几乎仅 css 的解决方案(如上面的解决方案)来做到这一点？

Answer 1

将值放在双引号中，例如“100%”

var svgcanvas = d3.select("body")
                    .append("svg")
                    .attr("width", "100%")
                    .attr("height","100%")
                    .append("circle")
                    .attr("cx", "50%")
                    .attr("cy", "50%")
                    .attr("r", "10%")
                    .attr("fill", "red")

作为 jsfiddle