如何在D3中添加抖动以避免重叠

How to add jitter to avoid overplot in D3?

本文关键字：重叠 抖动 添加 D3      更新时间：2023-09-26

是否有任何方法可以在绘图上的点添加抖动以避免重叠?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);}，这将有助于避免重叠。

相关文章：