如何添加抖動以避免在D3中出現重疊？

Question

有什麼辦法可以將抖動添加到圖上的點以避免重疊？ 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));}) 

Answer 1

我抖動添加到下面所有的x值。 xMap = function（d）{return（xScale（xValue（d））+ Math.random（）* 10）;}， 這將有助於避免重疊繪圖。