1

我正在使用 d3.js简单线图示例，并且想知道如何动态调整 x 和 y 轴的域，以便如果数据更新，可以调整图表以适应新线。这是设置这些域的当前代码（我认为）。

var x = d3.scale.linear().domain([-15, 15]).range([0, w]);

var y = d3.scale.linear().domain([0, 120]).range([h, 0]);

目前，域值是任意的。变量 w 和 h 是 svg 元素的宽度和高度。

任何帮助，将不胜感激。

4

1 回答 1

1

我首先将域的下限和上限设置为动态值，根据您的数据集计算得出。根据结构或您的数据，d3 具有计算值数组中的最大值/最小值的方法max。min

var x = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([0,w]);

如果你有一些方法来更新你的数据，你可以添加功能然后重新定义x（你可能想附加x到某种命名空间，在你的函数的整个范围内都可以访问），然后调用你的行生成器（通过d3.svg.line()）。

更新

看到你的评论，让我澄清一下。

有几种不同的方法可以做到这一点，因为 d3 是一个如此低级的库（我个人认为这是吸引力的一部分）。在我自己的工作中，我使用了多个系列，这让我可以方便地使用常见的进入、更新和退出模型，这些模型与其他图表类型（如条形图）一起使用。但在最基本的条件下，这就是您需要的：

  1. 您最初需要设置几个对象：
    • 你的 SVG 容器
    • 你的 x 和 y 比例
    • 线生成器，不绑定任何数据

  2. 接下来，您将使用该行生成器SVG:path使用您的数据集初始化一个元素
  3. 然后您需要创建一种方法来更新您的SVG:path元素并使用新数据进行缩放

这是一个演示这一点的jsfiddle，每秒钟添加新的随机数据，持续 10 秒。

于 2012-09-25T13:19:11.260 回答