2016-11-21 2 views
4

Вот мой фрагмент кода:Uncaught TypeError: Не удается прочитать свойство «оси» неопределенной

<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> 

это мой код, но когда я использую его, я получаю ошибку: участок: 53 неперехваченным TypeError: Невозможно прочитать свойство «ось» неопределенного. После поиска некоторых проблем, я думаю, может быть обновление, но я не знаю, как с этим бороться, не могли бы вы дать мне хорошее введение? Благодаря!

ответ

2

Вы используете d3 v4.x. в этой новой версии функция axis generator изменилась.

Это правильное переменное:

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

Большого спасибо! – Charlie

Смежные вопросы