javascript - D3.js 中的点图

我有兴趣创建一个 点图 (每个数据值都有连续的点)，但到目前为止我所管理的只是为每个值创建一个点。

更清楚地说，让我们说对于 array1，我希望第一个值创建 5 个圆圈，第二个 4 个圆圈等等......

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

最佳答案

为此，您可以使用 nested selections 和 d3.range() 。这个想法是，对于每个数字，您生成一个从 0 开始到比给定数字小 1 的数字范围。这为每个数字提供一个元素。

然后，圆圈的位置将由值的总数和您刚刚生成的值的数量以及每行的圆圈数量的索引确定。

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

完成演示 here 。

关于javascript - D3.js 中的点图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25186636/