D3.js，水平位置元素 [英] D3.js, position elements horizontally

问题描述

我是一个D3.js新手，所以我请求你的赦免，如果我问一些太基本的。

I'm a D3.js newbie, so I beg your pardon if I ask something too basic.

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

I have a simple array as a dataset:

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

以创建圆并将这些圆水平放置在从x = 10（并且y始终为50）开始的相同距离（12像素）处。我如何做？

For every element of my array I want to create a circle and horizontally put those circles at the same distance (12 pixel) starting from x=10 (and y being constantly 50). How can I do?

提前感谢。

推荐答案

d3.js 需要了解的事情是，它将数据绑定到svg元素并创建可视化。

Basic things you need to know about d3.js is, it binds data to svg elements and creates visualization.

获得d3的基础知识。

To get to the basics of d3. You can google around.

这里有一些我喜欢d3学习的网站。

Here are some sites that I prefer for d3 learning.

d3 - Ofcourse的官方网站。所有代码和示例。

d3 - Ofcourse the official website. With all the codes and examples.

Dashing D3 - 免费基本功能，您还可以获得更多d3教程的付费额外资讯。

Dashing D3 - Free for basic and you can also get a paid extension for further d3 tutorials.

d3noob - 您获得免费PDF与PDF中的所有逐行简报。

d3noob - You get a free PDF with all the line by line briefing in the PDF. The one I prefer the most for the beginners.

这是问题的答案 - fiddle 。

Here's the answer for the question - fiddle.

在创建圈子时非常简单d3。

It's very simple on creating circles in d3.

以下是我使用的代码。

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

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

First off I append the svg element to the .circle div.

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

然后根据数据的数量，

And then I add the circles depending on the number of data using the above block of code.

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

Note : .attr is that I'm adding attribute.

这里我已将半径固定为 20 。

Here I've fixed the radius to 20.

半径根据这样的数据。 function（d）{return d; }

But you can change the radius according to the data like this. function(d) { return d; }.

您可以使用 .style（fill，#ddd ）。

您可以通过使用

You can get more of this info from the websites I've provided.

希望这有帮助。

这篇关于D3.js，水平位置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！