反应+ D3：散点图中Y轴上的数据显示不正确

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。José Carlos希望引起更多关注对此问题：

我想解决我的问题，因为我不明白为什么X轴上的比例正确，而Y轴上的比例不正确。

我是D3的新手，我试图创建一个Scatterplot图形。当我尝试在图形中创建点时，此点无法正确显示。

我在散点图中有9点，但只出现5点。所有这些都没有正确地放置在其位置上。例如，我们在（0，0）中有一个，并且正确地位于x = 0上，但是y轴上的位置不为0几乎是2。

所有点的数据是：

name: GOMEZ IGUAL, ANNA x: 0.00 y: 20.00

name: PARKS, ROBYN LASHAE x: 15.00 y: 20.00

name: CASAS CARRERAS, QUERALT x: 25.00 y: 20.00

name: ABALDE DIAZ, TAMARA x: 15.00 y: 0.00

name: TIRERA, MEIYA x: 15.00 y: 0.00

name: BUCH ROSELL, ROSO x: 0.00 y: 0.00

name: BROWN, JOY ALEXIS x: 15.00 y: 20.00

name: RAMAN, JANA GEORGES R x: 0.00 y: 20.00

name: REISINGEROVA, JULIA x: 15.00 y: 0.00

我画点的代码是：

setPointsToCanvas(canvas, data, scales){
    console.log("data length: " + data.length);
    for (let i = 0; i < data.length; i++){
        console.log("name: " + data[i].name + " x: " + data[i].value_x + " y: " + data[i].value_y);
    }
    console.log("\n");
    canvas.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 5.5)     //Radius size, could map to another dimension
    .attr("cx", function(d) { return scales.xScale(parseFloat(d.value_x)); })  //x position
    .attr("cy", function(d) { return scales.yScale(parseFloat(d.value_y)); })  //y position
    .style("fill", "#FFC107")
    .on("mouseover", this.tipMouseOver);

}

这怎么可能？我在做什么错？

编辑我：

之所以只能看到9个点中的5个点，是因为重复了（x，y），而我只看到其中之一。

但是，如果我们查看图形，可以看到这些点正确地位于x轴上，而不是位于y轴上。例如，让我们检查x = 0上的点。（0，0）和（0，20）。我们在x轴上可以看到在0值上的两个点，但是这些点在y轴上的位置是错误的，y值0在约2值附近，y值20在间隙中约为21值。

这怎么可能？我做错什么了吗？

编辑II：

这里是一个代码框

Edit III：

如果我将1.50减去y位置，则这些点将正确定位：

.attr("cy", function(d) {
  return scales.yScale(parseFloat(d.value_y) - 1.50);
})

为什么我必须这样做？发生了什么事？有没有更好的选择来解决此问题？我做错什么了吗？

Answer 1

我调试了您的代码。

并且我发现您的yAxis和xAxis位置被错误的值转换。另外，xScale和yScale的域也不必要地增加或减少。

我提取了一些修改后的代码并添加了注释。

  let xScale = d3
    .scaleLinear()
    .domain([
      d3.min(data, d => parseFloat(d.value_x)), // No need +1
      d3.max(data, d => parseFloat(d.value_x))  // Same here
    ])
    .range(xRange);

  // You don't need y-axis direction transform.
  let y2 = 0;
  // You should match this value with the yRange
  // let yRange = [20, 360 - 20 - 30];
  let y1 = 360 - 20 - 30;
...
  canvas
    .append("g")
    .attr("transform", "translate(0, " + y1 + ")")
    .call(xAxis);
...
  canvas
    .append("g")
    .attr("transform", "translate(" + 40 + "," + y2 + ")")
    .call(yAxis)
...

我认为将偏移值设为常数是进行此类工作的一种好习惯。

请检查此代码和框。