d3.js：點擊更改X軸間隔

Question

這對軸幾乎可以按我希望的方式工作，但是有一個小的特殊錯誤。

我已經將圖形配置為根據選擇的其中一個導航葯丸來更改x軸間隔，並且這樣做，但是需要單擊兩次才能呈現更改。

您可以在這里看到一個稍微有用的示例： http : //jsfiddle.net/zreqz/3/

基本上，此問題的症結在於JavaScript底部的代碼：

$("li").on("click", function () {
    $("#chart").empty();
    renderGraph();
});

因此，步驟如下：

1. 單擊其中一種葯
2. 從DOM中清除圖表

3. 重新繪制圖形並確定哪個葯丸處於活動狀態，並基於此形成x軸域：

    getIntervalType = function () { if ($("#hours").hasClass("active")) { return startTimeHour; } else if ($("#days").hasClass("active")) { return startTimeDay; } else if ($("#months").hasClass("active")) { return startTimeMonth; } }; 

有人知道一種解決方案，可以使圖形在第一次單擊時正確地重新呈現嗎？

提前致謝。

Answer 1

在您定義的回調完成之后（即，在renderGraph（）已經被調用之后），clicked元素的類才更新。

手動設置類可以避免此問題：

d3.selectAll('li').on('click', function(){
    d3.selectAll('.active').classed('active', false);
    d3.select(this).classed('active', true);
    d3.select('#chart').select('svg').remove();
    renderGraph();
});

http://jsfiddle.net/zreqz/5/