我有兴趣创建一个Dot plot（每个数据值都有连续的点）但到目前为止我所管理的是为每个值创建一个点。
更清楚地说，假设对于 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);
您可以使用嵌套选择 http://bost.ocks.org/mike/nest/ and d3.range() https://github.com/mbostock/d3/wiki/Arrays#wiki-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 https://vida.io/documents/XTzqTNjAXHP7WadCY.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
