d3，折线图，错误： 属性d：预期数量

Question

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

我在控制台中收到错误。

Error: <path> attribute d: Expected number

代码中的控制台登录显示正确的数据，但我不认为它被传递给行函数。

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>