Question

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

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

Answer 1

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

让我们采取亚当的解决方案

d3.select('body')

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

附加

append('svg')

in

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的辅助函数之一，其功能类似于许多语言中的范围函数，具有功能支持（F#＆amp; 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; })

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

2 个答案:

使用更多的助手D3带来