D3.js在行动中,代码示例不起作用

Question

我从D3.js In Action一书中复制了一个简单条形图的例子,当我尝试运行它时出错.

控制台错误:

charts.js:3 Uncaught TypeError: Cannot read property 'linear' of undefined

代码:

var yScale = d3.scale.linear().domain([0, 390]).range([0,100]);

d3.select('svg')
  .selectAll('rect')
    .data([150,390,340,295])
  .enter()
  .append('rect')
    .attr('width', 50)
    .attr('height', function(d) { return yScale(d); })
    .attr('x', function(d, i) { return i*60; })
    .attr('y', function(d) { return 100 - yScale(d); })
    .style('fill', 'rgb(104, 167, 207)');

如果我将yScale声明移到底部,我会收到以下错误:

charts.js:11 Uncaught TypeError: yScale is not a function

Answer 1

您最有可能使用D3 v4,而该示例是基于v3构建的.因为v4与v3相比,现在是模块化的,名称空间变得扁平.根据线性刻度的更改日志,这意味着:

• d3.scale.linear↦ d3.scaleLinear

由于d3.scale未定义.linear,因此无法从中读取属性,因此出现错误.将您的代码更改为

var yScale = d3.scaleLinear().domain([0, 390]).range([0,100]);

让它工作.