D3 条形图按日期和上下文刷亮

Question

我有一个 D3 条形图，X 轴上有日期/时间。 这现在运行良好，但我想在它下面添加一个较小的可刷图，但由于我必须进行一些日期操作以使条形图居中在 X 轴刻度线上，我遇到了麻烦 - 请参阅这篇文章细节。

画笔似乎没有正确计算 X 轴日期范围。

这里是x域定义和刷机功能。 完整代码的 JSFiddle。

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

问题是您对焦点和上下文图表使用相同的比例。 一旦你改变它，选择的范围就会改变（相同的大小，但不同的基础比例）。 要修复，请使用两种不同的比例。

我已经在这里完成了，引入mini_x作为上下文图表的 x 比例。