调用轴函数导致D3出现问题

Question

调用轴函数导致D3出现问题

4

我刚开始学习D3，已经跟随教程创建了这段代码。

我创建了一些条形图并打算为我的图表创建一个x轴。问题是当我在画布上添加“.call（xAxis）”时，浏览器不显示任何内容，并在控制台中出现以下错误：

Uncaught TypeError: Cannot call method 'copy' of undefined d3.min.js:5
(anonymous function) d3.min.js:5
(anonymous function) d3.min.js:3
R d3.min.js:1
da.each d3.min.js:3
n d3.min.js:5
da.call d3.min.js:3
(anonymous function)

有人能帮我看一下问题出在哪里吗？我真的不明白缺少了什么或者我做错了什么！

<!doctype html>
<html>
<head>
    <title>Intro to D3</title>
    <script src="d3.min.js"></script>
<head>

<body>
    <script>

        var width = 1024;
        var height = 768;

        var dataArray = [20, 40, 60, 120];

        var xAxis = d3.svg.axis()
        .scale(widthScale);

        var widthScale = d3.scale.linear()
        .domain([0, 120])
        .range([0, width]);

        var color = d3.scale.linear()
        .domain([0, 120])
        .range(["red", "blue"]);

        var canvas = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(20, 0)")
        .call(xAxis);

        var bars = canvas.selectAll("rect")
        .data(dataArray)
        .enter()
            .append("rect")
            .attr("width", function(d){ return widthScale(d); })
            .attr("height", 20)
            .attr("fill", function(d){ return color(d); })
            .attr("y", function(d, i){ return i*30; });
    </script>
</body>
</html>

- Vanquiza

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

问题在于你在定义轴之前为其分配了比例尺。按照以下顺序进行操作即可解决问题:

var widthScale = d3.scale.linear()
    .domain([0, 120])
    .range([0, width]);
var xAxis = d3.svg.axis()
    .scale(widthScale);

你可能也希望将条形图添加到SVG本身，而不是包含轴的g元素。为此，只需拆分canvas的定义和轴的添加即可：

var canvas = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
canvas.append("g")
    .attr("transform", "translate(20, 0)")
    .call(xAxis);

完整演示在这里。