D3.js中的圓點圖

Question

我有興趣創建一個Dot圖 （每個數據值都有一個連續的點），但到目前為止我所管理的只是為每個值創建一個點。

為了更清楚，讓我們說我想要的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);

Answer 1

您可以使用嵌套選擇和d3.range() 。 我們的想法是，對於每個數字，您生成一系列從0開始的數字，並停在比給定數字少的數字處。 這為每個數字提供了一個元素。

然后，圓圈的位置將由索引確定為值的總數，您剛剛生成的值的數量以及每行的圓圈數。

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

在這里完成演示。