如何將條形圖向上移動

我正在學習d3.js，但我無法將圖表向上移動以適應x軸。可能問題是我沒有移動圖表，我應該移動座標軸，但是當我嘗試這樣做時，一切都是一團糟。這是我的。如何將條形圖向上移動

這是代碼：

function createBarChart(allData){ 
     var xScale = d3.scale.linear() 
         .domain([ 
         d3.min(allData, function(d){return d.DATE}), 
         d3.max(allData, function(d){return d.DATE}) 
         ]) 
         .range([ 
         padding+50, w-padding 
         ]); 


     var yScale = d3.scale.linear() 
         .domain([ 0, d3.max(allData, function(d){ return d.VALUE})]) 
         .range([ 
         h-padding+3, padding 
         ]); 

     var xAxisGen = d3.svg.axis().scale(xScale).orient('bottom'); 
     var yAxisGen = d3.svg.axis().scale(yScale).orient('left').ticks(10); 

     var svg = d3.select("body").append("svg").attr({"width": w, "height": h }); 

     var yAxis = svg.append("g").call(yAxisGen).attr("class", "axis") 
         .attr("transform", "translate(" + 70 +")"); 
     var xAxis = svg.append("g").call(xAxisGen).attr("class", "axis") 
         .attr("transform", "translate(0," + (h-padding) +")"); 

     svg.selectAll("rect") 
      .data(allData) 
      .enter() 
      .append("rect") 
     .attr({ 
      x: (function (d) { return xScale(d.DATE); }), 
      y: (function (d) { return yScale(d.VALUE); }), 
      width: "8px", 
      height: function(d){ return d.VALUE; }, 
      "fill": "#5CACEE" 
     }); 

     };

，這裏是該項目上codepen。 http://codepen.io/DiazPedroAbel/pen/wzovdK?editors=0010

來源

2016-09-21 coderHook

簡答：你正在添加的每個矩形的高度應該也是從一般高度減去（直到它的垂直比例）的函數的產品。

所以不是這個 height: function(d){ return d.VALUE; }

使用 height: function(d){ return h - padding - yScale(d.VALUE); }

來源

2016-09-21 23:45:08

完全做的工作。這是有道理的，只要它被縮放，就必須縮放它，但我試圖改變參數。我的另一個問題是，我的圖表似乎比原始數據少。當我創建圖表時，所有的數據都在那裏，但是一旦我縮放，我就會在每個條形圖之間留下空白區域，顯然數據量也會減少。 – coderHook

那麼，你的圖表包含了所有的數據，但是它的一部分被堆積在一起 - 它可以通過HTML結構檢查很容易地發現。這是因爲數據條目中的日期表示形式不正確 - 您將所有日期視爲數字（因爲它是在數據源中定義的）而不是日期。因此，您的xScale具有從19471001到20131001的域。一年內的條目之間的差異太微妙以至於無法注意。所以你絕對應該修復你的xScale創建方法，並明確地將d.DATE轉換爲真正的日期。 –

這是更新的代碼http://codepen.io/stm/pen/bwgorQ?editors=0010 注意xScale（更改的縮放類型LoC＃22;流水賬日期類型LoC＃25,28）所做的更改及其用法生成rects（類型鑄造LoC＃57），並刪除LoC＃110中的正則表達式操作 –

如何將條形圖向上移動

回答

相關問題