D3でオーバープロットを避けるためにジッタを追加するにはどうすればよいですか？

Question

オーバープロットを避けるために、プロット上のドットにジッタを追加する方法はありますか？ X軸は「カテゴリ」値であり、「y軸」は「数値」値です。 以下のコードでは、私はX/Yでプロットすることができましたが、いくつかの観測は重複しています。

おかげで、私のコードの

パートは、私は以下のように、すべてのx値にジッタを追加

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

です。 xMap = function（d）{return（xScale（xValue（d））+ Math.random（* 10）;}、 これはオーバープロットを避けるのに役立ちます。