图表样对象（但不是甘特或堆叠条形图）在d3 - 从哪里开始？ [英] Chart-like object (but not a gantt or stacked bar chart) in d3 -- where to start?

问题描述

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

I have a chart I've created in excel that I'd like to replicate in d3, but I'm not sure where I should begin.

这是为了显示哪个角色在说话这在玩游戏的时刻，所以它看起来类似于甘特图或堆积条形图，但它不工作的时间甘特图的方式。我是否正在想，它将是一个条形图或系列的条形图？我可以通过一系列1像素宽的条形，使每个像素都等于一条线在游戏中吗？

It's intended to show which character is speaking at which moment during a play, and so it visually looks similar to a gantt chart or stacked bar chart but it isn't working off of time the way a gantt chart would. Am I right in thinking that it'd be a bar chart or series of bar charts? Could I build it up by a series of 1 pixel wide bars, so that each pixel would equal a line in the play?

我会提供代码，但我试图修改标准的堆叠条形图，所有我真正能够做的是使整个空白或修改画布尺寸。

I'd provide code but I tried to modify the standard stacked bar chart and all I've really been able to do is either make the whole thing blank or modify the canvas dimensions. So I'd appreciate some suggestions to get me started.

推荐答案

在我看来，唯一的（和大的！）麻烦你将在这里创建JSON。一旦你有了JSON，它将是一块蛋糕！这是我的想法：

it seems to me that the only (and big!) trouble you'll have here is creating the JSON. Once you have the JSON, it will be a piece of cake! Here is what I thought:

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

Create a very big JSON that is just 1 big array of hundreds of objects. Each object would be like this:

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

然后，您将使用ordinal scale （地方）在y轴上，根据以前的演讲的累积持续时间设置x位置，并使用每个演讲的持续时间设置宽度，并使用CSS，您可以根据字符（使用<$ c $

Then, you'll append the narrow rectangles using an ordinal scale for the places ("place") on y axis, setting the x position according to the cumulative duration of previous speeches and setting the width using the duration of each speech, and using CSS you can color the bars according to the character (using character for setting the class).

为此，您将使用D3仅用于比例，避免典型的 selection（）。data（）。enter（）。append（）让我解释。假设你把你的JSON放在一个名为 data 的变量中。然后，您执行：

For this, you would use D3 only for the scales, avoiding the typical selection().data().enter().append() pattern and appending each rectangle in a for loop. Let me explain. Suppose you put your JSON in a variable named data. Then, you do:

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; ，在其中写下：

This allow you, for each loop, to know the y position of the bar using speech.place, the name of the character using speech.character, for the colors, and the duration of the line using speech.duration. For calculating the x position, you declare a var duration; outside the loop and, inside it, you write:

duration += speech.duration;

在这种方法中，一旦使用x位置的累积持续时间，数组中的对象必须

In this approach, once you would use the cumulative duration for x position, the objects in the array must to be in the exact chronological order of the play.

PS：D3非常好，可以为每个对象创建一个名为line的附加值，字符说出的实际线，并且当用户将鼠标悬停在矩形上时，他/她将看到语音的文本！

PS: D3 is so nice that you can create an additional value named "line", for each object, with the actual line spoken by the character, and when the user hover over the rectangle he/she will see the text of the speech!

这篇关于图表样对象（但不是甘特或堆叠条形图）在d3 - 从哪里开始？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！