在图表中居中禁止酒吧

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正确地做到这一点），但至少应该让你在修复它没有问题的路上