如何将条形图向上移动

我正在学习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中的正则表达式操作 –

如何将条形图向上移动

回答

相关问题