Question

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

当我添加console.log（）来尝试确定问题发生的位置时，传入的数据将正确显示为一个对象，其中百分比负载和效率键的有效数字为它们的值。 .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))

Answer 1

d3.line generator需要一个数据数组来生成一行。如docs中所述：

line（data）：为给定的数据数组生成一行。

在您的情况下，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>

希望这会有所帮助。

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

1 个答案: