javascript - 运行 D3.js 示例

Question

我一直在尝试学习 D3，但运行圆形示例时遇到问题。

http://mbostock.github.com/d3/tutorial/circle.html

我只是想运行圆圈改变颜色和大小的步骤。

我所做的只是复制和粘贴示例，但我不知道如何解决这个问题

http://jsfiddle.net/NntGN/

我一直在尝试通过本教程来解决此问题:

http://jsfiddle.net/H2SKt/1/

如果您查看饼图，就会发现名称被遮挡了。我需要进行哪些更改才能使所有标签都指向饼图的中心并且不会相互遮挡？我一直在使用文本 anchor ，觉得这是我最好的选择，但我没有取得任何进展。

感谢您的帮助:)

Answer 1

首先，您不必将以下 html 代码复制到您的网站:

<svg width="360" height="180">
  <circle class="little" cx="180" cy="45" r="12"></circle>
  <circle class="little" cx="60" cy="90" r="12"></circle>
  ...
</svg>

这就是 d3.js 为你做的事情。您只需编写 javascript 代码来选择一个 svg 元素(或者例如将一个元素附加到您的正文中)并创建元素。您的代码不起作用，因为 svg 未定义。

查看 circle tutorial 中的创建元素部分.

最后但并非最不重要的是这里是工作 jsfiddle .