javascript-D3.js中的点图

我对创建点图(每个数据值都有连续点的点图)感兴趣,但是到目前为止,我已经设法为每个值创建一个点.

更清楚地说,对于要让第一个值创建5个圆的array1,对于第二个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开始到比给定数字小一个的数字范围.这给每个数字一个元素.

然后,圆圈的位置将由值的总数,刚生成的值的数目以及每行的圆圈数的索引来确定.

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.

标签：d3-js,data-visualization,javascript
来源： https://codeday.me/bug/20191121/2051492.html