使用D3JS将流（或路径）拆分为段

Question

请考虑这些数据：

var data = [];
    data.segments = [
                    { "id": "A", "start": 0, "end": 4}, 
                    { "id": "B", "start": 5, "end": 9}, 
                    { "id": "C", "start": 10, "end": 14},   
                ];
    data.stream = [
            [   0, 0, 0, 0, 0,
                65, 60, 75, 85, 60,
                20, 30, 20, 25, 15,
            ],
            ];

我想将它显示为三个不同的部分，其中A段（即：流中的前5个条目）将是红色（或任何颜色），B段（中间5个条目）为绿色和C段（最后5个条目）为蓝色。

以下是照片编辑程序的帮助：

到目前为止，我可以将data.stream显示为stream。但是，我坚持把它分成几段。

如果我的数据结构不同（如this question），事情会更容易。但是，现在数据的结构方式有点理想，因为它允许我将段定义与流数据分开。这很有用，因为我希望能够在线下使用不同的段。 （您可以将这些片段视为音频中的声音或单词。有时我会关注单个声音，有时候会关注单个单词，但流会始终相同。）

我在JSFiddle上放了一个工作演示：http://jsfiddle.net/vsFhf/

如何为流的不同部分着色？

如果您需要更多详细信息，请与我们联系。

感谢您的帮助 -

法比安

Answer 1

根据您的细分定义拆分数据会有帮助吗？

var segmentdata = data.segments.map(function(segment, i) {
    return data.stream[0].slice(segment.start, segment.end + 1);
});

这将创建：

segmentdata = [[0,0,0,0,0], [65,60,75,85,60], [20,30,20,25,15]] 

Answer 2

无论如何，每个细分仍然需要单独的<path>元素。您可以构建一个分段数据数组，如@ValarDohaeris所建议的那样。但是，您也可以在不转换数据的情况下执行此操作：

您需要绑定到data.stream，而不是绑定到data.segments，这样您就可以为每个细分创建一个<path>。然后，您为每个pathGenerator致电<paths>，并传入您正在呈现slice的流的data.streams[0]。您还需要使用<path>缩放功能将每个x X翻译到适当的位置。

Here's the modified fiddle