d3.js устанавливает x положение прямоугольника на time.scale

Question

Я работаю над графиком d3, который использует time.scale и rects, и я застрял на очень маленькой проблеме. Либо ось x не расширяет всю длину своего контейнера svg (таким образом, ось x не находится под этим последним столбцом), либо положение x в строках почему-то неправильно учитывает диапазон. Я попытался просмотреть несколько примеров и много сообщений stackru, но до сих пор не могу понять, где я облажался. Спасибо!

Вот мой код:

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);                   

});

Заранее спасибо!

Answer 1

Проблема в том, что вы запускаете бары в позиции тиков. Таким образом, левая сторона панели выровнена с соответствующим галочкой, создавая впечатление, что панель не выровнена, потому что она смещена от центра.

Чтобы исправить, просто вычтите barWidth/2 в качестве смещения к x положение баров. Вы также захотите отрегулировать выходной диапазон вашей шкалы x так, чтобы ось y и первая полоса не перекрывались.

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

Полный пример здесь.