Question

我开始从书中学习D3＆＃34;开始使用D3＆＃34;由Mike Devar于2012年出版。我必须为我的大学项目制作几个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>

Answer 1

您的代码中没有太多变化可以使其与d3 v4一起使用 - 最新版本。

我在两个实例中都将d3.scale.linear更改为d3.scaleLinear，就是这样。请查看新文档以获取更多信息。从v3到v4的语法方面有很多变化。

文档在这里 - https://github.com/d3/d3/blob/master/CHANGES.md

小提琴 - https://jsfiddle.net/0exp8x68/

Answer 2

我认为你最好的机会是here。这是一个很好的阅读（你可以看到那里的努力，对迈克博斯托克的赞誉）。

如果您使用比例和轴，您将面临的主要变化是：

不再有scale个对象，它们都像d3.scaleLinear，d3.scaleOrdinal等。
不再有svg个对象，生成器驻留在d3对象上：d3.line()
轴现在已分开，即d3.axisBottom()，d3.axisLeft()等

这是一个非常非常简短的摘要，但我跳了它可以让你去

d3的变化（数据驱动文档）

2 个答案: