d3， 折线图， 错误： <path> 属性 d： 预期数字

Question

我这里有一个堆栈 - https://stackblitz.com/edit/d3-start-above-zero-gtudz8?embed=1&file=index.js&hideNavigation=1

我在控制台中收到错误。

Error: <path> attribute d: Expected number

代码中的控制台日志显示正确的数据，但我认为它不会传递给 line 函数。

Answer 1

几个明显的问题：

1. 您的 X 值是字符串，但您使用的是scaleLinear。 这是为了数字;试试scaleBand。
2. 修复此问题后，您没有正确设置x域。

这是这两个修复：

var data = [
	{
		"date": "Jan",
		"value": 1507
	},
	{
		"date": "Feb",
		"value": 1600
	},
	{
		"date": "Mar",
		"value": 1281
	},
	{
		"date": "Apr",
		"value": 1898
	},
	{
		"date": "May",
		"value": 1749
	},
	{
		"date": "June",
		"value": 1270
	},
	{
		"date": "July",
		"value": 1712
	},
	{
		"date": "Aug",
		"value": 1270
	},
	{
		"date": "Sept",
		"value": 1257
	},
	{
		"date": "Oct",
		"value": 1257
	},
	{
		"date": "Nov",
		"value": 1257
	},
	{
		"date": "Dec",
		"value": 1257
	}
];
///////////////////////////// Create SVG
var w = 400;
var h = 250;
var margin = {
top: 20,
bottom: 20,
left: 40,
right: 20
}
var width = w - margin.left - margin.right
var height = h - margin.top - margin.bottom
var svg = d3.select("body").append("svg")
.attr("id", "svg")
.attr("width", w)
.attr("height", h)
var chart = svg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
///////////////////////////// Create Scale  
var x = d3.scaleBand()
.range([0, width])

var y = d3.scaleLinear()
.rangeRound([height, 0])
///////////////////////////// Create Line
var line = d3.line()
.x(function(d) { 
console.log(d.date)
console.log(x.domain())
return x(d.date)
})
.y(function(d) { 
console.log(d.value)
console.log(y.domain())
return y(d.value)
})
x.domain(data.map(function(d) { 
return d.date
}));
y.domain([0, d3.max(data, function(d) { 
return d.value 
})]);
chart.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
///////////////////////////// Create Axis

var xAxis = chart.append('g')
.classed('x-axis', true)
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
var yAxis = chart.append('g')
.classed('y-axis', true)
.call(d3.axisLeft(y))  

<script src="https://d3js.org/d3.v4.min.js"></script>