我从 Mike Devar 于 2012 年出版的《D3 入门》一书中开始学习 D3。我必须为我的大学项目制作几个 D3 示例，所以我认为这将是一个很好的起点，因为我已经完成了3年前的书。但是，我下载了最新的 D3 版本(4.6.0)，我注意到书中的一些示例不再起作用。
我使用最新版本和书中示例中包含的版本测试了以下示例。它适用于旧版本(4.5.1)，但不适用于新版本，而且由于我似乎找不到任何列出版本更改的网站，有人可以指出代码的哪些部分必须更改那么该示例适用于最新版本吗？
<!DOCTYPE html>
<html>
<head>
<title>D3</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="d3.js"></script>
<script>
function draw(data) {
"use strict";
var margin = 50,
width = 700,
height = 300,
x_extent = d3.extent(data, function(d) {return d.collision_with_injury}),
y_extent = d3.extent(data, function(d) {return d.dist_between_fail});
var x_scale = d3.scale.linear()
.range([margin, width-margin])
.domain(x_extent);
var y_scale = d3.scale.linear()
.range([height-margin, margin])
.domain(y_extent);
d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){return x_scale(d.collision_with_injury)})
.attr("cy", function(d){return y_scale(d.dist_between_fail)})
.attr("r", 5);
}
</script>
</head>
<body>
<script>
d3.json('data/bus_perf.json', draw);
</script>
</body>
</html>
最佳答案
无需对代码进行太多更改即可使其与 d3 v4 - 最新版本一起使用。
我在这两个实例中将d3.scale.linear更改为d3.scaleLinear，仅此而已。请查看新文档以获取更多信息。从 v3 到 v4，语法有相当多的变化。
文档在这里 - https://github.com/d3/d3/blob/master/CHANGES.md
在这里摆弄 - https://jsfiddle.net/0exp8x68/
关于javascript - d3(数据驱动文档)的变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42376311/