如何在浏览器窗口的底部以直线绘制圆形阵列

Question

我正在尝试使用浏览器窗口底部的d3画一条直线。 我不确定如何实现。 我知道我可以使用SVG标签创建一堆圆圈，但是使用带数组的for循环可能是更好的方法。

我希望圆圈在浏览器窗口底部以直线显示。 我也希望圆圈也能填充浏览器窗口的宽度。 任何帮助将不胜感激。

Answer 1

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 。

亚当使用以下命令创建数据数组

 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);})

Answer 2

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; })