Question

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

我已经将图形配置为根据选择了哪个导航片来更改x轴间隔，并且它会执行此操作，但需要两次单击才能渲染更改。

您可以在此处看到一个稍微有效的示例：http://jsfiddle.net/zreqz/3/

基本上，这个问题的关键在于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;
  }
};

任何人都知道在首次点击时让图表正确重新渲染的解决方案吗？

提前致谢。

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/

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

1 个答案: