问d3中类似图表的对象(但不是甘特图或堆叠条形图) --从哪里开始？

EN

在我看来，唯一的(也是最大的！)您在这里遇到的问题是创建JSON。一旦拥有了JSON，这将是小菜一碟！这是我的想法：

创建一个非常大的JSON，它只是一个包含数百个对象的大数组。每个对象将如下所示：

{"character": "John Doe", "place": "tavern", "duration": 5}

然后，您将使用y轴上的位置("place")的序数刻度来附加窄矩形，根据先前演讲的累积持续时间设置x位置，并使用每次演讲的持续时间设置宽度，然后使用CSS可以根据字符对条形进行着色(使用character设置类)。

为此，您将仅对刻度使用D3，从而避免典型的selection().data().enter().append()模式，并将每个矩形附加到For循环中。让我解释一下。假设您将JSON放在一个名为data的变量中。然后，您需要：

for (var i = 0; i < data.length; i++){
    var speech = data[i]
    //rest of the code
}

这样，对于每个循环，就可以使用speech.place了解条形的y位置，使用speech.character了解字符的名称，使用speech.duration了解颜色和线条的持续时间。为了计算x位置，您可以在循环外部声明一个var duration;，并在其内部编写以下代码：

duration += speech.duration;

在这种方法中，一旦您要使用x位置的累积持续时间，数组中的对象必须按照游戏的确切时间顺序排列。

PS: D3太棒了，你可以为每个对象创建一个名为" line“的附加值，用字符说出的实际行，当用户将鼠标悬停在矩形上时，他/她将看到讲话的文本！