Javascript d3.js在time.scale上设置rect的x位置

我正在做一个d3图表，它使用时间刻度和矩形，我被困在一个非常小的问题上。要么x轴没有延伸svg容器的整个长度（因此x轴不在最后一个条下），要么矩形的x位置没有正确考虑范围。我试着看了几个例子和许多stackoverflow帖子，但到目前为止，我不知道我在哪里搞砸了。谢谢大家!

这是我的密码：

var margin = {top:30, right:30, bottom:30, left:30},
    width = 600 - margin.right - margin.left,
    height = 300 - margin.top - margin.bottom;  


var parseDate =  d3.time.format("%d-%b-%y").parse;

var formatTime = d3.time.format("%e %B");                 


var x = d3.time.scale().range([0, width]);

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



var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(d3.time.format("%b %y"));                       


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

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





d3.tsv("data/months.tsv", function(error, data) {
data.forEach(function(d) {
        d.month =  parseDate(d.month);
        d.value = +d.value;  //ensures variable is treated like a number

    }); 


   x.domain(d3.extent(data, function(d) { return d.month; }));
   y.domain([0,d3.max(data,function(d) { return d.value; })]);

   var barPadding = 4;

   var barWidth = width/data.length - barPadding;

   var rects = svg.selectAll("rect")
                .data(data)
                .enter().append("rect")
                .attr("class" , "bar")
                .attr("x", function(d) { return x(d.month); })  // I think the problem is here
                .attr("y", function(d) { return y(d.value); })  
                .attr("width", barWidth )   
                .attr("height", function(d) { return height - y(d.value); });           



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

            svg.append("g")
            .attr("class" , "axis") 
            .call(yAxis);                   

});

---

提前谢谢你

问题是，你在滴答声的位置启动了条。也就是说，条的左侧与相应的记号对齐，从而产生条未对齐的印象，因为它偏离中心

要修复，只需减去

barWidth/2

，作为条的

x

位置的偏移量。您还需要调整x比例的输出范围，以便y轴和第一个条不会重叠

x.range([barWidth/2, width]);
// etc.
rects.attr("x", function(d) { return x(d.month) - barWidth/2; })

---

完整示例。

抱歉，我无法让JSFIDLE正常工作。这里是数据。月值1-Jan-14 5 1-Feb-14 10 1-Mar-14 13 1-Apr-14 19 1-May-14 21 1-Jun-14 25 1-Jul-14 22 1-Aug-14 18 1-Sep-14 15 15 1-Oct-14 13 1-Nov-14 11 11 11 1-Dec-14 12 1-Jan-15 15 15 15 1-Feb-15 20 1-Mar-15 18 1-Apr-15 17 1 17 1-5-5-15 16 16 16 1-Jun-15 18 18 1-Jul-11-7-15 23 1-8-15 25 25 25谢谢，Lars。这是一个很好的建议，但是如果我可以使用你的JSFIDLE，当我将条的填充改为浅灰色时，轴似乎没有延伸。我错过什么了吗？我在fiddle.bar{fill:#ccc；}中添加了一个css样式。轴将延伸到域的最远位置，即延伸到极端条的中心。如果希望它覆盖该范围之外的值，则必须相应地扩展它。D3不会自动执行此操作。明白。谢谢你，拉尔斯！