带有流星错误的D3 ::返回y = 0且高度相同

时间:2016-02-02 12:53:18

标签: javascript meteor d3.js nvd3.js

我正在使用此http://bl.ocks.org/mbostock/3885304参考来使用Meteor和D3

绘制 Bar Char

此代码返回y轴为0且高度始终相同.....                                  

代码部分

  var margin = {top: 20, right: 20, bottom: 30, left: 40},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

 var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

 var yScale = d3.scale.linear()
.range([height, 0]);

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

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

 var svg = d3.select('#Rectangle')
 .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 + ")");


  var drawCircles = function(error,update) {

      if (error) throw error;
      var data = Extra.find().fetch();


     xScale.domain(data.map(function(d) { return d.inst; }));

     yScale.domain([0, d3.max(data, function(d) { return d.percent;                         })]);

     svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);



       svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Percentaz");


        svg.selectAll('rect')
      .data(data)
      .enter()
         .append('rect')
       .attr("x", function(d) { return xScale(d.inst); })
     .attr("y", function(d) { return yScale(d.percent); })
       .attr("width", xScale.rangeBand())
      .attr("height", function(d) { return height-yScale(d.percent); });
          };


      Extra.find().observe({
       added: function () {
        x =[];
         var f = Extra.find().fetch() ;
       for(var i=0;i<f.length;i++){
      x.push(parseInt(f[i].percent))
         }
  drawCircles(false);
  },

  changed: _.partial(drawCircles, true)

});


};

请为我提供解决方案,以便我可以实施

0 个答案:

没有答案