如何在d3.js中顯示y軸

Question

我是d3.js.中的新成員，在我的browswer中看不到y軸，只顯示x軸。請找到解決方案。

    var barOffset=5; 
       var barWidth=50; 
       var width=700,height=700; 
       function sdf(data,key){ 
        var objects=[]; 
        for(key in data){ 
        var g=data[key] 
        objects.push(g) 
        } 
        return objects; 
        } 
       var q=sdf(data); 
       console.log(q); 

       var xScale=d3.scale.ordinal() 
       .domain(q.map(function (d,i){return d.name;})) 
       .rangeBands([0,width]); 
       console.log(xScale); 

       var yScale=d3.scale.linear() 
       .domain([0,d3.max(q,function (d,i){return d.price;})]) 
       .range([0,height]); 
       console.log(yScale); 

       var xAxis=d3.svg.axis() 
      .scale(xScale) 
       .orient("bottom") 
       .ticks(9); 

      var yAxis=d3.svg.axis() 
      .scale(yScale) 
      .orient("left") 
      .ticks(5);   

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

      canvas.append("g") 
      .call(xAxis) 
      // .attr("transform","translate(50,0)") 
       .attr("transform", "translate(0," + (height-98)+ ")") 
       .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.04em") 
       .attr("dy", ".10em") 
       .attr("transform", function(d) { 
       return "rotate(-20)" 
        }); 
       canvas.append("g") 
        .call(yAxis) 


       var svg=canvas.selectAll(".bar") 
        .data(q) 
        .enter() 
        .append("rect") 
        .attr("class","bar") 
        .attr("transform","translate(0,0)") 
        .attr("x",function(d,i){return xScale(d.name);}) 
        .attr("y",function (d,i){return 600-yScale(d.price);}) 
        .attr("height",function (d,i){return yScale(d.price);}) 
        .attr("width",xScale.rangeBand()-10) 
        // .attr("x",function (d,i){return i*(barWidth+barOffset);}) 
        //.attr("y",function (d,i){return 500-d.price;}) 
        // .attr("height",function (d,i){return d.price;}) 
        // .attr("width",barWidth) 
        .style("fill","steelblue"); 
        var svg1=canvas.selectAll("text") 
         .data(q) 
         .enter().append("text") 
         .attr("x",function(d,i){return xScale(d.name)+27;}) 
         .attr("y",function (d,i){return 600-yScale(d.price);}) 
         .attr("fill","orange") 
         .text(function (d){return d.price;}) 

`

Answer 1

您還沒有分配給軸的任何空間。

按照this bar chart example，與您的代碼將是：

var margin = {top: 20, right: 20, bottom: 30, left: 40}, //40 pixels on left for axis 
width = 700 - margin.left - margin.right, 
height = 700 - margin.top - margin.bottom; 

var canvas = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

canvas.append("g") 
    .call(xAxis) 
    .attr("transform", "translate(0," + height + ")") 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.04em") 
    .attr("dy", ".10em") 
    .attr("transform", function(d) { 
    return "rotate(-20)" 
    }); 

canvas.append("g") 
    .call(yAxis) 

Here's your code fixed.