在圖表中居中禁止酒吧

Question

我正在使用d3創建一個條形圖。爲此，我查看了this代碼並稍加改動了一下。

然而，它所做的是對準條形，並且我希望條形立即在條形y軸上開始。

它看起來像問題來自這2個代碼：

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

而這一次的最後一行：

svg.selectAll(".bar") 
    .data(graphObj) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.step); }) 

其中x（d.step）負責距離，x被設置在var x = ...

不知何故，我需要改變這一點，但無法弄清楚。 的距離是有點不同，因爲我改變了這個：

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

這樣：

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

但它並沒有太大的幫助。

你能幫忙嗎？

這是我的代碼：

 $('#chartDiv').html(''); 

     var margin = {top: 10, right: 10, bottom: 35, left: 50}, 
      width = 600 - margin.left - margin.right, 
      height = 250 - margin.top - margin.bottom; 

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

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

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


     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .ticks(10, ""); 

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


     graphObj.forEach(function(d) { 
      d.step = +d.step; 
      d.temp = +d.temp; 
     }); 

     x.domain(graphObj.map(function(d) { return d.step; })); 
     y.domain([0, d3.max(graphObj, function(d) { return d.temp; })]); 

     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", "-40px") 
      .style("text-anchor", "end") 
      .text("Temperature"); 

     svg.selectAll(".bar") 
      .data(graphObj) 
      .enter().append("rect") 
      .attr("class", "bar") 
      .attr("x", function(d) { console.log(d.step, x.rangeBand(), x(d.step)); return x(d.step); }) 
      .attr("width", x.rangeBand()) 
      .attr("y", function(d) { return y(d.temp); }) 
      .attr("height", function(d) { return height - y(d.temp); }); 

     if ($('#chartDiv').css('left').replace('px','') < 0) { 
      $('#chartDiv').animate({ 
       left: 10 
      }, 1000); 
     } 

Answer 1

您需要將i變量添加到.attr("x", function(d) { return x(d.step); })，就像這樣：.attr("x", function(d, i) { return x.rangeRoundBands() * i; })，所以它會通過柵欄把它們一前一後（這可能需要一些調整，不能沒有jsfiddle正確地做到這一點），但至少應該讓你在修復它沒有問題的路上