javascript - 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() 已经被调用之后。

手动设置类可以避免这个问题:

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/