Javascript d3.js：单击更改x轴间隔

我有一对轴，几乎按照我想要的方式工作，但是有一个小的，特别的错误

我已经将图形配置为根据选择的导航丸之一更改x轴间隔，它会这样做，但需要单击两次才能渲染更改

您可以在此处看到一个稍微起作用的示例：

基本上，这个问题的核心在于JavaScript底部的代码：

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

因此，这些步骤是：

单击其中一个药丸

从DOM中清除图形

重新渲染图形并确定哪个药丸处于活动状态，然后根据以下内容形成x轴域：

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

有人知道一种解决方案，可以让图形在第一次单击时正确地重新渲染吗

---

提前感谢。

单击元素的类在您定义的回调完成之前不会更新，也就是说，在已经调用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();
});

---

小提琴似乎不起作用。图表是硬编码的，d3代码位于一个名为“graphFunction”的函数中，该函数似乎在任何地方都没有被调用。@ScottCameron，很抱歉，我的复制和粘贴错误。现在应该更新并开始工作了。嘿，谢谢！这很有效。在看到这个之前，我实际上想出了另一个可行的解决方案。如果您感兴趣：