Блог

Я пытаюсь построить многорядную гистограмму, используя d3, но сталкиваюсь с проблемами из-за разреженного характера набора данных.

Я хочу заставить ось x иметь галочку на каждый день, даже если данных нет. Тестовые данные, которые у меня есть, могут содержать точки данных с интервалом в несколько недель, поэтому я ожидаю широких областей без полос — и это нормально.

Я думал, что смогу заставить xAxis использовать набор предопределенных тиков, используя массив tickValues , но это приводит к очень странному отображению наложения текста для каждого дня поверх дней, в которых есть некоторые данные.

Я включил скриншот того, что я имею в виду.

У меня такое чувство, что я должен что-то делать при вычислении ширины полос, но не могу понять, что это может быть.

Код:

 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')
}
 

Порядковая шкала всегда будет показывать столько тиков, сколько значений в домене. Вам просто нужно передать полный массив дат в качестве домена.

Замените эту строку

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

с помощью этого

x.domain(tickValues);

Похоже, у вас все остальное настроено правильно, так что это позволит распределить столбцы вдоль оси и сделать их более тонкими.