Question

我有一个新手d3.js的问题。我尝试输入很多教程输入，但我似乎永远无法让显示输出正常工作。这是一个例子。我有一个d3.js页面模板示例（来自Scott Murray的D3书。）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Your beautiful D3 code will go here
        </script>
    </body>
</html>

现在，我转到：http://www.recursion.org/d3-for-mere-mortals/并尝试输入D3容器中的第一个代码示例：

var rectDemo = d3.select("#rect-demo").
  append("svg:svg").
  attr("width", 400).
  attr("height", 300);

rectDemo.append("svg:rect").
  attr("x", 100).
  attr("y", 100).
  attr("height", 100).
  attr("width", 200);

我已经在网上搜索有关如何在html文件中构建D3代码的来源，但不幸的是，几乎所有的教程都假设你知道在哪里放置相关的代码行来实现这一切打开浏览器时工作。在过去的几周里，这个普遍的问题一直困扰着我。

当我在容器中输入上述内容时，我没有输出：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Your beautiful D3 code will go here
            // http://www.recursion.org/d3-for-mere-mortals/
            var rectDemo = d3.select("#rect-demo").
              append("svg:svg").
              attr("width", 400).
              attr("height", 300);

            rectDemo.append("svg:rect").
              attr("x", 100).
              attr("y", 100).
              attr("height", 100).
              attr("width", 200);
        </script>
    </body>
</html>

有人可以简要解释为什么这样做以及我要做什么才能显示这个例子？非常感谢！我一整天都在努力尝试展示我想要制作的示例和微小的修改，制作复制和粘贴的任何示例输出，消失！

Answer 1

问题实际上只是初始的“切入点”，即D3追求一切的元素。在HTML模板中，元素的主体中没有任何内容，但在D3代码中，您选择ID为“rect-demo”的元素来附加所有内容。这个元素不存在，因此没有任何反应。

所以你有两个选择来完成这项工作 - 要么将带有此ID的元素添加到HTMl模板，要么告诉D3附加到body。

选项1：

<body>
<div id="rect-demo"></div>
// etc

选项2：

var rectDemo = d3.select("body").
// etc

总的来说，使用最新版本的D3，您无需明确指定添加元素的命名空间（除非它不明确）。也就是说，您只需.append("svg:rect")而不是.append("rect")。

Answer 2

如果您使用的是Chrome，则需要在本地服务器上运行该文件。如果您使用的是Mac，则内置Apache服务器，或者您可以为Windows获取MAMP或XAMPP之类的内容。我注意到虽然Firefox使用file:// URL渲染D3，因此这将是最快的修复;只需使用Firefox。：）

让D3.js使用容器显示

2 个答案: