javascript - react +D3 : Data over Y AXIS in scatter plot not appear correctly

Question

我是 D3 新手，我正在尝试创建散点图图形。当我尝试在图形中创建点时，它显示不正确。

我有 9 个点要放入散点图中，但只显示 5 个。而且所有这些点的位置都不正确。例如，我们在 (0, 0) 中有 1，并且正确地超过了 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);

}

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

编辑我:

之所以只能看到 5 个点而不是 9 个点，是因为有 (x, y) 重复，而我只看到其中一个。

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

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

编辑二:

这是一个代码沙箱

编辑三:

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

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

我认为将偏移值设为常数是此类工作的一个很好的做法。

请检查此代码和框。