1

请考虑以下数据：

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。然而，我坚持把它分成几部分。

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

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

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

如果您需要更多详细信息，请告诉我。

感谢您的帮助-

法比安

4

2 回答 2

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]]
于 2013-11-07T18:32:33.253 回答
1

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

data.stream您需要绑定到，而不是绑定到data.segments，这将使您能够为<path>每个段创建一个。然后你调用pathGenerator其中的每一个<paths>，传入slice你正在渲染的流data.streams[0]。您还需要使用缩放功能将每个 X 平<path>移到适当的位置。x

这是修改后的 fiddle。

于 2013-11-07T18:55:05.697 回答