javascript - 如何在浏览器窗口底部以直线绘制圆数组

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 通过将数据绑定(bind)到选择进行操作，因此添加数据我们首先需要一个(可能)空选择。

.selectAll('circle')

请注意使用 selectAll 而不是 select。

Adam 使用

创建一个数据数组

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

这使用了 d3 的一个辅助函数，它的行为类似于许多具有功能支持的语言中的范围函数(使用示例在 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]

无论如何，我们有一个使用

绑定(bind)的数字列表

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