Question

我有一个D3条形图，X轴上有日期/时间。这现在运作良好，但是我想在它下面添加一个较小的可刷涂图表，并且由于我必须做的一些日期操作使条形图在X轴刻度线上居中而有麻烦 - {{ 3}}。

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

这是x域定义和画笔功能。 see this post for details on that

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比例。

D3条形图按日期刷新上下文

1 个答案: