D3.js中的点图 [英] Dot Plot in D3.js

问题描述

我有兴趣创建一个点图（每个数据值连续的点），但我迄今为止管理的是为每个值创建一个单一的点。

I'm interested in creating a Dot plot (the one with the consecutive dots for every data value) but what I've managed so far is to create just a single dot for every value.

为了更清楚，让我们说array1我想要的第一个值创建5个圆，第二个4个圆等等...

To be more clear, let's say for the array1 I want for the first value to create 5 circles, for the second 4 circles and so on...

array1 = [5,4,2,0,3] 

任何想法？

我的部分代码：

var circle = chart.selectAll("g")
    .data(d)
    .enter()
    .append("g")
    .attr("transform", function(d) { return "translate(" + xScale(d.values) + ",0)"; });
circle.append("circle")
    .attr("cx", xScale.rangeBand()/2)
    .attr("cy", function(d) { return yScale(d.frequency); })
    .attr("r", 5);

推荐答案

您可以使用嵌套选择和 d3.range（） 。想法是，对于每个数字，您生成一个范围的数字从0开始，停止在一个小于给定的数字。这会给每个数字一个元素。

You can use nested selections and d3.range() for this. The idea is that for each number, you generate a range of numbers starting at 0 and stopping at one less than the number given. This gives you one element per number.

然后，圆圈的位置将由索引确定的值的总数和值的数量

The position of the circles would then be determined by the indices into the total number of values and the number of values you've just generated and the number of circles per row.

chart.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .selectAll("circle")
  .data(function(d) { return d3.range(d); })
  .enter()
  .append("circle")
  .attr("cx", function(d, i, j) {
      return ((i + d3.sum(data.slice(0, j))) % numPerRow + 1) * 15;
  })
  .attr("cy", function(d, i, j) {
      return Math.floor((i + d3.sum(data.slice(0, j))) / numPerRow + 1) * 15;
  })
  .style("fill", function(d, i, j) { return colour(j); })
  .attr("r", 5);

完成演示此处。

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