1

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

我已将图表配置为根据选择的这些导航药丸中的哪一个来更改 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;
  }
};

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

提前致谢。

4

1 回答 1

2

直到您定义的回调完成之后，单击元素的类才会更新 - 即，在 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/

于 2013-09-17T02:36:00.670 回答