React + D3：散点图中Y轴上的数据无法正确显示

Question

我是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：

这是一个代码框

编辑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)
...

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

请选中此代码和框。