D3.js Barchart timescale : Uneven space between bars

时间:2015-07-28 15:56:03

标签: javascript d3.js

I guess the title explains the problem. Similar questions on SO refer to ordinal scales.

x axis scale:

var x = d3.time.scale()
        .domain(d3.extent(data, function(d) { 
            return d.date; 
        }))
        .range([width/data.length/2, width-(width/data.length/2)]);

The bars

bars.enter()
    .append("rect")
        .classed("column", true)
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
        .attr("width", (width-(width/data.length)) / (data.length+2))
        .attr("x", function(d) { return x(d.date) - (width/data.length)/2; })
        .attr("y", height)
        .attr("height", 0)
        .transition().duration(1000)
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value);});

How can I amend this code so that I have a whole and equal number of pixels between each vertical bar, and thereby getting an even spacing ?

enter image description here

0 个答案:

没有答案