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