D3 对象全部呈现为 0px x 0px，没有属性

Question

这个对我来说有点神秘。我正在学习一些非常基本的 d3 教程，努力将 d3 嵌入到 iPython 笔记本中。我正在 python 内写入文件并将其呈现到 iframe。因为我这样做，所以我可以在浏览器中独立查看文件，以确保我没有处理特定的 iPython 怪癖。（我只是想给出这一切的背景，以防我错过了一些要点）。

问题是，当我创建一系列圆圈时，包括主要的 'svg' 都呈现为没有属性的 0px x 0px 对象。我与检查员一起查看了所有内容，并将我完成的 python 生成的文档与教程版本（我可以在浏览器中正常查看）进行了比较，看起来都一样，但不知何故教程版本有效，而我的有没有属性。

我显然遗漏了一些小细节，但我希望能有另一双眼睛检查一下，看看我可能做错了什么。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="http://mbostock.github.io/d3/talk/20111018/d3/d3.js"></script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <script type="text/javascript">
            var w = 500;
            var h = 50;
            var dataset = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3];

            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            var circles = svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle");

            circles.attr("cx", function(d, i) {
                        return (i * 50) + 25;
                    })
                   .attr("cy", h/2)
                   .attr("r", function(d) {
                        return d;
                   })
                    .attr("fill", "yellow")
                    .attr("stroke", "orange")
                    .attr("stroke-width", function(d) {
                        return d/2;
                    });


        </script>
    </body>
</html>

哦，不幸的是，由于网络限制，我无法使用其他附加工具。我在一些 d3 例子上取得了很好的成功，只是这个例子对我不起作用。谢谢

Answer 1

这个问题的实际原因未知，但是 Stephen Thomas 指出我使用的是旧版本的 d3。更新到当前版本后，问题消失了。尽管示例代码和我的代码使用相同的版本，但示例代码有效而我的没有。无论如何，更新解决了问题。

感谢斯蒂芬对解决方案的推动。

D3 对象全部呈现为 0px x 0px，没有属性

D3 objects all rendering as 0px x 0px with no attributes

javascript

ipython

d3.js