Javascript D3库未正确转换值（React Native）

我有一个显示持续时间的条形图，但是，条形图显示不准确。例如：总持续时间为1h 05m，等于1.0757。当我对总持续时间调用d3函数时：

d3.scaleLinear（）.range（[0，height]）.domain（[min，max]）

，它返回的值为31.8486，使条形图显示的是30分钟而不是一小时

需要切换什么以确保条形图正确显示数据

let h = 200;
let y = this.getDomainAndRange(data, h);

let displayOrder = [
  0: {dayName: "Sunday", totalDuration: {value: 2.6707, display: "2h 40m"},
  1: {dayName: "Monday", totalDuration: {value: 1.0757, display: "1h 5m"},
  2: {dayName: "Tuesday", totalDuration: {value: 1.562, display: "1h 34m"}
]
// Once d3 is called on the totalDuration[value], it returns:
// 0: 200 (appears on the screen as 3h), 
// 1: 31.8486 (appears on the screen as 30m),
// 2: 83.116335 (appears on the screen as 1h 10m)

<Svg>
displayOrder.map((wd, idx) => {
   let barHeight = this.getDayDurationHeight(data, wd, y);
   let actualDuration = this.getActualDuration(data, wd)
   return (
    <G key={data["start"] + "g_" + idx}>
      <Rect key={data["start"] + "wdb_" + idx} id={actualDuration} x={(idx + 1) * 45} width={bw} y={h - barHeight} height={barHeight} fill={purple} />
    </G>
   );
})
</Svg>

设h=200；
设y=this.getDomainAndRange（数据，h）；
让显示顺序=[
0:{dayName:“Sunday”，总持续时间：{value:2.6707，显示：“2h 40m”}，
1:{dayName:“星期一”，总持续时间：{value:1.0757，显示：“1h 5m”}，
2:{dayName:“星期二”，总持续时间：{值：1.562，显示：“1h 34m”}
]
//一旦对totalDuration[值]调用d3，它将返回：
//0:200（屏幕上显示为3h），
//1:31.8486（屏幕上显示为30m），
//2:83.116335（屏幕上显示为1h 10m）
displayOrder.map（（wd，idx）=>{
设barHeight=this.getDayDurationHeight（数据，wd，y）；
让actualDuration=this.getActualDuration（数据，wd）
返回(
);
})

getDomainAndRange（数据、高度）{
//每天迭代一次，找出最小值和最大值。。。
设天数=数据[“天数”]；
设min=Number.MAX\u SAFE\u整数；
设max=Number.MIN\u SAFE\u整数；
for（设i=0；imax）max=day[“总持续时间”][“值”]；
如果（天[“总持续时间”][“值”]
if（day[“totalDuration”][“value”]>max）max=day[“totalDuration”][“value”]；

需要切换到

if（day[“totalDuration”][“value”]>max）max=Math.ceil（day[“totalDuration”][“value”]）；

此外，
d3
功能中的
min
需要设置为
0

原始：
x=d3.scaleLinear（）.range（[0，height]）.domain（[min，max]）

修正：
设x=d3.scaleLinear（）.range（[0，height]）.domain（[0，max]）

原因：顶行被设置为
max
，这是当前行的确切数目。添加
Math.ceil（）
将顶行切换为一个整数。此外，底线上升到
min
。相反，它应该始终是
0
，而不是根据
min
进行切换，通常是
。范围（[0，高度]）应该是
。范围（[height，0]）
，因为SVG左上角是0，0
getDomainAndRange(data, height) {
 //iterate through each day and find the min and max value...
 let days = data["days"];
 let min = Number.MAX_SAFE_INTEGER;
 let max = Number.MIN_SAFE_INTEGER;
 for (let i = 0; i < days.length; i++) {
   let day = days[i];
   if (day["totalDuration"]["value"] > max) max = day["totalDuration"]["value"];
   if (day["totalDuration"]["value"] < min) min = day["totalDuration"]["value"];
 }
 if (max <= 0) max = 1;
 let x = d3.scaleLinear().range([0, height]).domain([min, max])
 return x;
}

getDayDurationHeight(data, dayName, dr) {
 //iterate through each day and find the bar height value...
 let days = data["days"];
 let duration = dr(0);

 for (let i = 0; i < days.length; i++) {
   let day = days[i];
   if (day["dayName"] == dayName) {
    //this is where the d3 function is converting the value
    duration = dr(day["totalDuration"]["value"]);
   }
 }
 return duration;
}

getActualDuration(data, dayName){
  let days = data["days"];
  let duration = 0

  for (let i = 0; i < days.length; i++) {
    let day = days[i];
    if (day["dayName"] == dayName) {
      duration = (day["totalDuration"]["display"]);
    }
  }
  return duration;
}