有什么方法可以向绘图上的点添加抖动以避免过度绘图? X 轴是“分类”值,“y 轴”是“数字”值。 使用下面给出的代码,我可以在 X/Y 上绘图,但一些观察结果是重叠的。
谢谢
我的部分代码是
var xValue = function(d) { return d[xVar];}, // data -> value
xScale = d3.scale.ordinal()
.rangeRoundBands([0,width],1),
xMap = function(d) { return xScale(xValue(d));},
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yValue = function(d) { return d[yVar];}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", radius)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));})
最佳答案
我向所有 x 值添加抖动,如下所示。 xMap = function(d) { return (xScale(xValue(d)) + Math.random()*10);}, 这将有助于避免过度绘制。
关于javascript - 如何添加抖动以避免 D3 中的过度绘制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40458363/