D3 bar chart by date with context brushing

Question

I have a D3 bar chart with date/time on the X axis. This is working well now, but I'd like to add a smaller brushable chart below it and am having trouble due to some of the date manipulations I had to do to make the bars center over the X axis tick lines - see this post for details on that .

The brush does not seem to be calculating the X axis date range correctly.

Here is the x domain definition and brush function. JSFiddle for the full code.

main_x.domain([
    d3.min(data.result, function(d) { return d.date.setDate(d.date.getDate() - 1); }),                  
    d3.max(data.result, function(d) { return d.date.setDate(d.date.getDate() + 2); })
]);

function brushed() {

    // I thought that re-defining the x domain without the date manipulations might work, but I 
    // was getting some odd results
    //main_x.domain(d3.extent(data.result, function(d) { return d.date; }));

    main_x.domain(brush.empty() ? main_x.domain() : brush.extent());
    console.log(brush.extent());

    bar.selectAll("rect")
        .attr("width", function(d) { return main_width/len; })
        .attr("x", function(d) { return main_x(d.date) - (main_width/len)/2; });

    main.select(".x.axis").call(main_xAxis);
}

Answer 1

The problem is that you're using the same scale for the focus and the context chart. As soon as you change that, the range of the selection changes (same size, but different underlying scale). To fix, use two different scales.

I've done this here , introducing mini_x as the x scale for the context chart.