使用d3.js中的tickValues控制栏位置

Question

I'm trying to build a multi series bar chart using d3 but running into problems due to the sparse nature of the dataset.

I want to force the x-axis to have a tick for every day, even if there is no data. The test data I have can have data points that are weeks apart so I'm expecting wide areas with no bars - which is fine.

I thought I could force the xAxis to use a set of predefined ticks using the tickValues array, but these leads to very strange display of overlaying the text for each day on top of days that do have some data.

I've included a screenshot of what I mean.

I get the feeling I'm supposed to do something when calculating the width of the bars but can't figure out what that might be.

Code:

var data = [];
var tickValues = [];

var max = _.max(chartData.tabular, function(assessment) { return assessment.dateUTC; });
var min = _.min(chartData.tabular, function(assessment) { return assessment.dateUTC; });
var iter = moment.twix(min.dateUTC, max.dateUTC).iterate("days");

while(iter.hasNext()){

    var momentObj = iter.next();

    var assessment = _.find(chartData.tabular, {'date': momentObj.format('DD/MM/YYYY')});

    tickValues.push(momentObj.valueOf());

    if(assessment != null){

        if(assessment.type == 'calculated'){
            data.push({date: momentObj.valueOf(), calculated: assessment.score, manual: null});
        }

        if(assessment.type == 'manual'){
            data.push({date: momentObj.valueOf(), calculated: null, manual: assessment.score});
        }
    }
}

log(data);

var margin = {top: 20, right: 55, bottom: 30, left: 40},
    width  = $('#cahai-chart').width() - margin.left - margin.right,
    height = 500  - margin.top  - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(tickValues)
    .tickFormat(function(d){return d3.time.format('%d/%m/%y')(new Date(d))});

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

var color = d3.scale.ordinal()
    .range(["#001c9c","#101b4d","#475003","#9c8305","#d3c47c"]);

var svg = d3.select("#cahai-chart svg")
    .attr("width",  width  + margin.left + margin.right)
    .attr("height", height + margin.top  + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var labelVar = 'date';
var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});
color.domain(varNames);

data.forEach(function (d) {
    var y0 = 0;
    d.mapping = varNames.map(function (name) {
        return {
            name: name,
            label: d[labelVar],
            y0: y0,
            y1: y0 += +d[name]
        };
    });
    d.total = d.mapping[d.mapping.length - 1].y1;
});

x.domain(data.map(function (d) { return d.date; }));
y.domain([0, d3.max(data, function (d) { return d.total; })]);

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", ".71em")
    .style("text-anchor", "end")
    .text("Score");

var selection = svg.selectAll(".series")
    .data(data)
    .enter().append("g")
    .attr("class", "series")
    .attr("transform", function (d) { return "translate(" + x(d.date) + ",0)"; });

selection.selectAll("rect")
    .data(function (d) { return d.mapping; })
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function (d) { return y(d.y1); })
    .attr("height", function (d) { return y(d.y0) - y(d.y1); })
    .style("fill", function (d) { return color(d.name); })
    .style("stroke", "grey")
    .on("mouseover", function (d) { showPopover.call(this, d); })
    .on("mouseout",  function (d) { removePopovers(); })

var legend = svg.selectAll(".legend")
    .data(varNames.slice().reverse())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function (d, i) { return "translate(55," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 10)
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", color)
    .style("stroke", "grey");

legend.append("text")
    .attr("x", width - 12)
    .attr("y", 6)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function (d) { return d; });

function removePopovers () {
    $('.popover').each(function() {
        $(this).remove();
    });
}

function showPopover (d) {
    $(this).popover({
        title: d.name,
        placement: 'auto top',
        container: 'body',
        trigger: 'manual',
        html : true,
        content: function() {
            return "Date: " + d3.time.format('%d/%m/%y')(new Date(d.label)) +
                "<br/>Score: " + d3.format(",")(d.value ? d.value: d.y1 - d.y0); }
    });
    $(this).popover('show')
}

Answer 1

An ordinal scale will always show as many ticks are there are values in the domain. You just need to pass the full array of dates as the domain.

Replace this line

x.domain(data.map(function (d) { return d.date; }));

with this

x.domain(tickValues);

It looks like you have everything else set up correctly, so this will space the bars out along the axis and make them slimmer.