d3.js：是否可以通过键而不是索引对行进行转换？ [英] d3.js: Is it possible to line transition by key instead of index?

问题描述

我有不同长度的数据数组，其中 x 值（Years）是有限年数的一部分，例如：

I have data arrays of varying length, with an x value (Years) that is part of a finite number of years, e.g.:

var data = [{Year: 2008, Value: 5}, {Year: 2009, Value: 6}]

或

var data = [{Year: 2007, Value: 8}, {Year: 2009, Value: 10}, {Year: 2010, Value: 11}]

现在，如果我从具有更多值的数据集转换为具有更少值的数据集，则（2007，8）点被插值到（2008，5），它看起来很奇怪。我想要的是通过键插入（在这种情况下为年）。

Right now, if I transition from the data set that has more values to the one that has less, the (2007, 8) point gets interpolated to (2008, 5), and it just looks weird. What I want is to interpolate by key (Year in this case).

我很容易理解如何使用以下教程，它只传递一个键函数到 selection.data ，以便通过键而不是索引绑定。

I understood quite simply how to do it with bar charts with the following tutorial, which simply passes a key function to selection.data in order to bind by key instead of index.

在一行的情况下，你似乎不能传递一个键函数因为您传递的数据必须是数组数组（基准是点数组）。

In the case of a line though, you can't seem to be able to pass a key function since the data that you pass must be an array of arrays (The datums are an array of points).

在使用折线图时，如何获得类似的结果？

How do you get a similar result when you work with line charts?

推荐答案

这取决于你使用的行生成器。总之，没有简单的方法来做到这一点。这里有几个选项。

This depends on the line generator you use. In short, there's no easy way to do this. Here are a few options.

• 调整图表的比例。


• 将您的行划分为多个段。这样，您可以删除其中一个段而不影响其他段。根据您使用的插值方式，这可能无法正常工作。


• 添加虚拟元素以填充数据数组，使其长度始终相同。

这完全取决于您的应用程式，因此可能不适合您的应用程式。您的应用程序哪个选项最适合（或可能有另一个）。我可能会尝试第一个，因为它很容易实现。

It depends entirely on your application which option is most suitable (or there may be another). I would probably try the first one first, as it is easy to implement.

这篇关于d3.js：是否可以通过键而不是索引对行进行转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！