如何在浏览器窗口底部的直线上绘制圆圈数组

d3 具有具有选择器概念的函数式风格。如果您正在考虑使用循环，那么您可能错误地使用该工具。函数样式允许您专注于要对每个数据项执行的操作，而不是如何处理数据。还有许多帮助程序函数。

让我们以亚当的解决方案为例

d3.select('body')

我们使用 CSS 样式选择器从 DOM 中选择一个对象。在这种情况下，它是文档的正文。我们可以用这个选择做很多事情，但首先我们使用

append('svg')

在

d3.select('body').append('svg')

如果我们需要重用这些选择，这可以以不同的方式写入

var body = d3.select('body');
var svg = body.append('svg');

我们可以定义刚刚定义的对象的属性

.attr('width', width)
.attr('height', height)

现在有趣的一点来了。D3 通过将数据绑定到选择来操作，因此添加数据我们首先需要一个(可能(空的选择。

.selectAll('circle')

请注意使用selectAll不select。

Adam 创建了一个数据数组

 d3.range(0, width, width/10)

这使用 d3 的帮助程序函数之一，其行为类似于许多语言中的 range 函数，具有功能支持(F# 和 Python 中的使用示例(

> d3.range(5)
[0, 1, 2, 3, 4]
> d3.range(0,5)
[0, 1, 2, 3, 4]
> d3.range(4,5)
[4]
// At intervals of 2 
>d3.range(0,5,2)
[0, 2, 4]

无论如何，我们有一个数字列表，它使用

.data() 

返回一个选择。我们定义此选择的生命周期事件中发生的情况。因为我们只处理数据输入，所以我们可以去

.enter()

此选择下的任何内容都将应用于任何基准输入(在本例中为列表中的所有元素(。您应该能够了解正在发生的事情，直到

.attr('cx', function(d){ return d; }) 

正在听到的是属性cx依赖于我们之前提供的列表中的数据。我们可以提供一个将要执行的函数，该函数传递当前项目的datum和index。

使用D3带来的更多帮助程序

通常，使用 D3 时需要使用scale帮助程序。这使我们能够抽象出像素的概念，而是专注于固定的范围。

稍微改变亚当给出的例子。假设我们想在文档末尾显示 5 个均匀分布的圆圈。

我们可以定义这样的数据

 var data = d3.range(0, 5);

并设置一个像

 var x = d3.scale.linear()
    .domain([0, data.length])
    .range([0,width])

域(即输入(为0到我们数据的最大数量。

.domain([0, d3.max(data)])

范围(这就是我们想要输出的范围(为 0 到最大像素数

.range([0,width])

然后，示例代码将如下所示

var width = window.innerWidth;
var height = 100;
var data = d3.range(0, 5);
var x = d3.scale.linear()
    .domain([0, data.length-1])
     .range([0,width])
d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
  .selectAll('circle')
    .data(data ).enter()
  .append('circle')
    .style('fill', 'red')
    .attr('r', height/4)
    .attr('cy', height/2)
    .attr('cx', function(d){ return x(d);})

我们甚至可以将最后一行更改为

.attr('cx', function(d, i){ return x(i);})

虽然在这个例子中，索引和数据是相同的，但这允许我们在保持数据简单的同时间隔项目。假设数组实际上是 r 应该的值

...
var data = [4,1,20,5,7];
...
.attr('r', function(d){ return d;})
...
.attr('cx', function(d, i){ return x(i+0.5);})

var width = window.innerWidth;
var height = 100;
d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
  .selectAll('circle')
    .data(d3.range(0, width, width/10)).enter()
  .append('circle')
    .style('fill', 'red')
    .attr('r', height/4)
    .attr('cy', height/2)
    .attr('cx', function(d){ return d; })