Question

我正在为我在大学做的项目学习d3.js。我的问题是当我将一个轴附加到我的svg对象时，整个svg从浏览器中的站点消失。我也试过使用一些代码示例，例如here，但它也没有用。

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
    <title>Data</title>
    <script src="https://d3js.org/d3.v4.0.0-alpha.44.min.js"></script>
</head>
<body>
    <script>

        var data_1 = [23, 54, 67, 12, 4];
        var data_2 = [1, 2, 3, 4, 5];

        var width = 800;
        var height = 800;

        var mapScale = d3.scaleLinear()
                            .domain([0, 70])
                            .range([0, width - 40]);

        var axisBot = d3.svg.axis();
                            .scale(mapScale);

        var axisLft = d3.axisLeft(data_1);


        var canvas = d3.select('body')
                        .append('svg')
                        .attr('width', width)
                        .attr('height', height);


        var xsCont = canvas.append('g') 
                            .call('axisBot');

        var lines = canvas.selectAll('rect')
                            .data(data_1)
                            .enter()
                                .append('rect')
                                .attr('width', function(d) { return mapScale(d); })
                                .attr('height', 20)
                                .attr('y', function(d, i) { return i * 100 });

    </script>
</body>
</html>

Answer 1

以下是更正后的代码。

<!DOCTYPE HTML>
<html>
<head>
    <title>Data</title>
    <script src="https://d3js.org/d3.v4.0.0-alpha.44.min.js"></script>
</head>
<body>
    <script>

        var data_1 = [23, 54, 67, 12, 4];
        var data_2 = [1, 2, 3, 4, 5];

        var width = 800;
        var height = 800;

        var mapScale = d3.scaleLinear()
                            .domain([0, 70])
                            .range([0, width - 40]);

        var axisBot = d3.axisBottom(mapScale);

        var axisLft = d3.axisLeft(data_1);


        var canvas = d3.select('body')
                        .append('svg')
                        .attr('width', width)
                        .attr('height', height);


        var xsCont = canvas.append('g')
                            .call(axisBot);

        var lines = canvas.selectAll('rect')
                            .data(data_1)
                            .enter()
                                .append('rect')
                                .attr('width', function(d) { return mapScale(d); })
                                .attr('height', 20)
                                .attr('y', function(d, i) { return i * 100 });

    </script>
</body>
</html>

这就是结果：

第1期

var axisBot = d3.svg.axis();
                        .scale(mapScale);

你知道吗？方法链断开了，您应该删除;

第2期

问题1并不重要，因为在d3 v4中，没有d3.svg.axis（https://github.com/d3/d3-axis）。您应该使用d3.axisBottom / d3.axisTop / d3.axisRight / d3.axisLeft

第3期

 var xsCont = canvas.append('g') 
   .call('axisBot');`

你应该在这里调用方法/函数，而不是字符串，这意味着你应该删除'。

无法在d3.js中添加轴

1 个答案:

第1期

第2期

第3期