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

d3.js使用百分比而不是像素设置属性

1 个答案: