d3.js:单击时更改 x 轴间隔

d3.js: Change x-axis interval on click

本文关键字：js 单击 d3      更新时间：2023-09-26

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

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

有谁知道让图形在第一次点击时正确重新渲染的解决方案？

提前谢谢。

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

相关文章：