javascript - 未捕获的类型错误 : Cannot read property 'axis' of undefined

标签 javascript d3.js

这是我的代码片段:

<html> 
 <head> 
    <meta charset="utf-8">         
    <title>a picture</title> 
    <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text{
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
 </head> 

    <body>
        <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <script>
            var width=300; 
            var height=300; 

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

            var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];  

            var linear = d3.scaleLinear()     
                           .domain([0, d3.max(dataset)])
                           .range([0, 250]);

            var rectHeight=25;  

            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x",20)
               .attr("y",function(d,i){
                    return i * rectHeight;
            })
               .attr("width",function(d){
                    return linear(d);
            })
               .attr("height",rectHeight-2)
               .attr("fill","steelblue");

            var axis = d3.svg.axis()
                         .scale(linear)      
                         .orient("bottom")          
                         .ticks(7);         

            svg.append("g")
               .attr("class","axis")
               .attr("transform","translate(20,130)")
               .call(axis);

        </script>

    </body> 
</html>

这是我的代码,但是当我使用它时,我会得到错误:plot:53 Uncaught TypeError: Cannot read property 'axis' of undefined。搜索了一些关于它的问题,我想可能会有更新,但我不知道如何处理,你能给我一个好的介绍吗?谢谢!

最佳答案

您正在使用 d3 v4.x。在这个新版本中,axis generator功能发生了变化。

这是正确的变量:

 var axis = d3.axisBottom(linear)
    .ticks(7);   

关于javascript - 未捕获的类型错误 : Cannot read property 'axis' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40716697/

相关文章:

javascript - 如何在 NodeJS 中创建带有路径的文件对象?

javascript - 该函数是否执行: jQuery (".class"). function();如果在该页面上找不到该类?

javascript - d3/javascript 根据输入过滤数据

javascript - d3 v4 错误 this.setAttribute 不是函数

javascript - 未捕获的 ReferenceError : Showdown is not defined, ReactJS.NET

javascript - 渲染 Prop 与 HOC?

javascript - $rootScope.$broadcast 在 AngularJS 中的用法

javascript - 在 D3 视觉 (flare.json) 中获取指向被点击元素的路径

javascript - 如果列名是数字,d3 读取 csv/tsv 文件?

javascript - 未捕获的 TypeError : d3. schemeCategory20 不是函数