D3线生成器返回空而不是路径数据字符串

Question

我正在使用d3 v4创建线图。我的Pentenerator使用D3's Line((方法，是返回null而不是路径数据字符串(例如" M 100 L 300 100 100 L 200 300 Z"(，因此没有绘制线。

当我添加console.log((s以尝试确定问题发生的位置时，基准中传递的作为具有百分比和效率键的对象正确出现，并具有有效数字作为其值。似乎没有调用.x((和.y((方法中的console.log((s，但我不确定为什么会这样。

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

Answer 1

d3.line发电机期望一系列数据生成线路。如文档中所述：

行(数据(：为给定的数据阵列生成一行。

在您的情况下，data.bins看起来像一个数组，因此请查看使用pathGenerator函数从代码和一些示例箱中生成的示例曲线。

摘要：

var data = {
	bins: [
  	{ percentLoad: 30, efficiency: 1.4},
  	{ percentLoad: 60, efficiency: 0.3},
  	{ percentLoad: 90, efficiency: 1}    
  ]
}
const xScale = d3.scaleLinear()
    .domain([10, 100])
    .range([0, 400])
const yScale = d3.scaleLinear()
    .domain([0, 2])
    .range([200, 0])
const pathGenerator = d3.line()
    .x(d => xScale(d.percentLoad))
    .y(d => yScale(d.efficiency))
    .curve(d3.curveCardinal);
const path = d3.select('svg').append('path').style('fill','none').style('stroke', 'steelblue')
    .attr('d', pathGenerator(data.bins));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>
<svg width="400" height="200"></svg>

希望这会有所帮助。