d3 微库不工作

Question

我刚开始学习 d3，但我不明白为什么 d3 中的其他微库在正确加载 d3 后无法正常工作。例如，如果我做类似

var xScale = d3.scale.linear().domain([0, 20]).range([0, width]);
var yScale = d3.scale.linear().domain([0, 20]).range([height, 0]);

我的浏览器控制台显示 Uncaught TypeError: Cannot read property 'linear' of undefined，而我在许多示例中都看到了它。同样，类似

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");

会产生关于 svg 的错误。我明白一旦我这样做

<script src="d3-folder/d3.js"></script>

所有其他较小的库应该都可用。为什么在我的系统上不是这样？

Answer 1

听起来像是您包含的 d3 文件的版本问题。您使用的是 D3 V3.x 还是 V4.x?
在 V3.x 中，您使用的是您发布的 liner 秤：

d3.scale.linear().domain([0, 20]).range([0, width]);.

但在 V4.x 他们将命名空间更改为：

d3.scaleLinear().domain([0, 20]).range([0, width]);

轴也在不同的区域分开：

d3.axisTop - create a new top-oriented axis generator
d3.axisRight - create a new right-oriented axis generator
d3.axisBottom - create a new bottom-oriented axis generator
d3.axisLeft - create a new left-oriented axis generator

在这里您可以找到 D3 V4.x 的实际 API 参考：https://github.com/d3/d3/blob/master/API.md

d3 微库不工作

d3 microlibraries not working

javascript

svg

axis

d3.js