javascript - React + D3：散点图中 Y 轴上的数据显示不正确

Question

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

我有 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 值左右。

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

编辑二：

这是一个代码框

编辑三：

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

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

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

标签： javascriptreactjsd3.js

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

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

请检查此代码框。