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相比，现在是模块化的，名称空间变得扁平。根据{{3}}的线性标度，这意味着：

d3.scale.linear↦change log

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

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

让它发挥作用。

D3.js在行动中，代码示例无效

1 个答案: