javascript - D3：X 轴值错误

Question

我是 d3.js 的新手，我遇到了问题。我用 React.js 制作了一个组件，我在同一页面中重复使用。这个组件绘制了一个散点图，我第一次调用这个组件时正确显示了两个轴（左侧）。但是，我第二次称它为 x 轴显示错误的值，但 y 轴显示正确的值（正确的值）。

我传递给右侧图形组件的值是：

x: 5.56 y: 0.00
x: 5.56 y: 33.33
x: 44.44 y: 0.00
x: 0.00 y: 0.00
x: 22.22 y: 33.33
x: 0.00 y: 0.00
x: 0.00 y: 33.33
x: 22.22 y: 0.00

你怎么看，x 最小值是 0.00，x 最大值是 44.44，但是我们在 x 轴上得到了像 min -1.0 和最高的是 5.5

我定义轴刻度的代码是：

setScales(data){ 
    let xRange = [this.state.margin.left, this.state.width - this.state.margin.right];
    let yRange = [this.state.margin.top, this.state.height - this.state.margin.top - this.state.margin.bottom]; // flip order because y-axis origin is upper LEFT  

    let xScale = d3.scaleLinear()
    .domain([ d3.min(data, function(d) { return d.value_x; }) - 1,
              d3.max(data, function(d) { return d.value_x; }) + 1 ])
    .range(xRange);

    let yScale = d3.scaleLinear()
    .domain([ d3.max(data, function(d) { return d.value_y; }) + 1,
              d3.min(data, function(d) { return d.value_y; }) - 1 ])
    .range(yRange);       

    return {"xScale" : xScale, "yScale" : yScale, "xRange" : xRange, "yRange" : yRange};
} 

那么，我做错了什么？发生了什么事？

标签： javascriptreactjsd3.js

Answer 1

¡¡¡我找到了解决办法！！！！

我不知道为什么，但问题出在数据类型上。我已经将值解析为浮动，现在它可以工作了。

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

我不知道为什么会发生这种情况，因为我从同一个函数中得到了值，我得到了左图的值。

现在，两个图形都是正确的。