Javascript 如何在d3.js中显示y轴

我是d3.js的新手。我在浏览器中看不到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;})

---

`

您尚未为轴分配任何空间

遵循以下步骤，使用您的代码：

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)

---

你能做一把小提琴吗？我在粘贴的代码中看不到输入数据q。