javascript - 按 D3 中的菜单按钮后调用轴

Question

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

我获取了散点图，并尝试根据事件的菜单项加载各种数据。

一切工作正常，但我遇到了一个无法解决的问题。 xAxis 应根据链接到菜单项的数据值进行 self 更新。

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

我认为问题(和解决方案)在于这部分代码；

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

        })

    svg.select(".x.axis")
       .call(xAxis);

}

我做了这个JSFiddle使其更容易理解。

Answer 1

事情是这样的。

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

你是对的，每当你点击标签时，你都必须重新更新你的体重秤。

我做了几件事:

• 在强制转换数字后添加一个 sourceData 变量，以供所有函数引用
• 添加 updateXScale(data) 函数，该函数将仅更新您的 x 秤的域
• 每次单击标签时都会调用它。这不仅可以修复您的 x 比例，还可以正确缩放 .dot 的 x 坐标。

这就是它的整体样子。我创建了一个fiddle其中有您的示例的工作版本。

这是您的 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);

}