Question

我有一个我在excel中创建的图表，我想在d3中复制，但我不知道应该从哪里开始。

它旨在显示哪个角色在游戏中的哪个时刻说话，因此它在视觉上看起来类似于甘特图或堆积条形图，但它不像甘特图那样起作用。我是否正确地认为这是条形图或一系列条形图？我可以通过一系列1像素宽的条形建立它，以便每个像素在游戏中等于一条线吗？

我会提供代码，但我尝试修改标准的堆积条形图，而我真正能够做的就是将整个内容留空或修改画布尺寸。所以我很感激一些让我入门的建议。

Answer 1

在我看来，你在这里遇到的唯一（也是大问题）麻烦就是创建JSON。一旦你拥有JSON，它将是一块蛋糕！这就是我的想法：

创建一个非常大的JSON，它只是数百个对象的一个大数组。每个对象都是这样的：

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

然后，您将使用序数比例为y轴上的位置（“地点”）附加窄矩形，根据先前语音的累积持续时间设置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知道字符的名称，颜色以及使用{的行的持续时间{ {1}}。为了计算x位置，你在循环外面声明一个speech.duration，并在其中写下：

var duration;

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

PS：D3非常好，您可以为每个对象创建一个名为“line”的附加值，并使用该角色所说的实际行，当用户将鼠标悬停在该矩形上时，他/她将看到演讲！