Question

我是D3.js的新手，所以如果我问一些太基本的话，请原谅。

我有一个简单的数组作为数据集：

[0, 10, 15, 20, 24, 35, 58]

对于我阵列中的每个元素，我想创建一个圆圈，并从x = 10开始将这些圆圈水平放置在相同的距离（12像素）（并且y始终为50）。我该怎么办？

提前致谢。

Answer 1

您需要了解的关于d3.js的基本知识是，它将数据绑定到svg元素并创建可视化。

了解d3的基础知识。你可以谷歌。

以下是一些我更喜欢d3学习的网站。

d3 - 当然是官方网站。所有代码和示例。

Dashing D3 - 免费提供基本版本，您还可以获得付费扩展以获取更多d3教程。

d3noob - 您可以获得免费的PDF，其中包含PDF中的所有逐行简报。对于初学者来说，我最喜欢的那个。

以下是问题的答案 - fiddle。

在d3中创建圆圈非常简单。

这是我用过的代码。

var svg = d3.select('.circle')
        .append('svg')
        .attr('height', 500)
        .attr('width', 500)

首先，我将svg元素附加到.circle div。

svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr("cx", function(d, i) { return 60 * i })
.attr("cy", 60)
.attr("r", 20)

然后我根据使用上述代码块的数据来添加圆圈。

注意：.attr是我正在添加属性。

我已将半径修改为20。

但你可以根据这样的数据改变半径。 function(d) { return d; }。

当然，您可以使用.style("fill", "#ddd")使用.style()和其他css内容为圈子着色。

您可以从我提供的网站上获取更多此类信息。

希望这有帮助。