D3條形圖日期與上下文刷牙

我有一個D3條形圖在X軸上的日期/時間。現在工作的很好，但是我想在它下面添加一個更小的可刷圖，並且由於我必須做的一些日期操作而遇到麻煩，因爲這些操作必須使這些條處於X軸刻度線的中心 - see this post for details on that。D3條形圖日期與上下文刷牙

筆刷似乎沒有正確計算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); 
}

來源

2014-04-11 JamesE

問題是您對焦點和上下文圖表使用相同的比例。只要你改變了，選擇的範圍就會改變（相同的大小，但不同的基礎比例）。要修復，請使用兩種不同的比例。

我已經完成這here，介紹mini_x作爲上下文圖的x尺度。

來源

2014-04-11 17:31:08

非常好 - 再次感謝。 – JamesE

嗨，在你的小提琴中，酒吧是重疊的y軸。你有什麼想法，當他們移動時，我如何能夠將這些移動的酒吧推到Y軸的後面？它與Z-index或寬度有關嗎？這是一個很晚的評論，但如果你能提供幫助，我將非常感激。謝謝。 –

SVG中沒有z-index;元素按它們在DOM中出現的順序呈現。您可以重新排列它們，請參閱https://stackoverflow.com/questions/14167863/how-can-i-bring-a-circle-to-the-front-with-d3您還可以使用剪輯路徑來隱藏圖表區域外的部分http： //bl.ocks.org/mbostock/1667367 –

D3條形圖日期與上下文刷牙

回答

相關問題