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