javascript-D3.js中的点图

2019-11-21 11:36:35 阅读：231 来源： 互联网

标签：d3-js data-visualization javascript

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

更清楚地说,对于要让第一个值创建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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-D3.js中的点图