在 D3 中按菜单按钮后调用轴

Call the axis after pressing a menu button in D3

本文关键字：调用 按钮 菜单 D3      更新时间：2023-09-26

我正在尝试用 http://bl.ocks.org/mbostock 的例子自学D3。

我

拿了散点图，我正在尝试根据哪个菜单项处于活动状态加载各种数据。

一切正常，但我有一个我无法解决的问题。xAxis 应根据链接到菜单项的数据中的值自行更新。

我在网上搜索答案，但找不到适合我的答案。

我认为问题(和解决方案(在于代码的这一部分;

function updateChart() {
    svg.selectAll('.dot')
        .transition()
        .duration(1000)
        .attr('cx', function(d) {
            return x(d.data[parameter]);
        })
    svg.select(".x.axis")
       .call(xAxis);
}

我制作了这个JSFiddle，以使其更容易理解。

这是怎么回事。

  • 但是，您在第一次使用正确的x比例成功生成了xAxis
  • 您没有使用新的数据域更新xAxis

您是对的，因为每当单击标签时，您都必须重新更新秤。

我做了几件事：

  • 在强制数字后添加一个sourceData变量，以便所有函数引用
  • 添加一个updateXScale(data)功能，只需更新x秤的domain
  • 每次单击标签时调用它。这不仅可以修复您的 x 刻度，还可以为您的.dot正确缩放 x 坐标。

这是它在一起的样子。我创建了一个小提琴，其中包含您的示例的工作版本。

这是您的updateChart函数以供参考： 

function updateChart() {
  updateXScale(sourceData);
  svg.selectAll('.dot')
    .transition()
    .duration(1000)
    .attr('cx', function(d) {
      return x(d.data[parameter]);
    });
  svg.select(".x.axis")
    .call(xAxis);
}
相关文章：