javascript - D3 条形图(按日期和上下文刷)

Question

我有一个 D3 条形图，X 轴上带有日期/时间。现在运行良好，但我想在其下方添加一个较小的可刷图表，但由于我必须进行一些日期操作才能使条形图位于 X 轴刻度线的中心，所以遇到了麻烦 - see this post for details on that 。

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

这里是x域定义和画笔函数。 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

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

我已经做到了here ，引入 mini_x 作为上下文图表的 x 比例。