简单的折线图 - 动态调整大小

Question

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

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

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

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

任何帮助将不胜感激。

Answer 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秒。