d3 行生成器返回 null 而不是路径数据字符串

Question

我正在使用 d3 v4 创建折线图。我的 pathGenerator 使用 d3 的 line() 方法返回 null 而不是路径数据字符串（例如“M 100 100 L 300 100 L 200 300 z”），因此没有绘制任何线。

当我添加 console.log()s 以尝试确定问题发生的位置时，传入的数据正确显示为一个对象，其中百分比负载和效率键以有效数字作为其值。.x() 和 .y() 方法中的 Console.log() 似乎没有被调用，但我不确定为什么会这样。

const xScale = d3.scaleLinear()

    .domain([10, 100])

    .range([0, chartAreaWidth])

const yScale = d3.scaleLinear()

    .domain([0, 2])

    .range([chartAreaHeight, 0])

const pathGenerator = d3.line()

    .x(d => xScale(d.percentLoad))

    .y(d => yScale(d.efficiency))

    .curve(d3.curveCardinal);

const binGroups = chartGroup.selectAll('.binGroups')

    .data(data.bins)

    .enter().append('g')

    .attr('class', (d,i) => 'binGroups binGroup' + i)

binGroups.selectAll('.percentLoads')

    .data(d => d)

    .enter().append('path')

    .attr('class', (d,i) => 'percentLoads percentLoad' + i)

    .attr('d', d => pathGenerator(d))