我得到的这对轴几乎可以按我希望的方式工作,但有一个小的、特殊的错误。
我已将图表配置为根据选择这些导航丸中的哪一个来更改 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; } };
有人知道在第一次点击时正确重新呈现图形的解决方案吗?
提前致谢。
最佳答案
被点击元素的类在您定义的回调完成之前不会更新 - 即在 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();
});
关于javascript - d3.js:单击时更改 x 轴间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18838138/