Несколько линейных диаграмм серии d3 на одной странице

Question

Использование d3 Я хочу нарисовать несколько линейных диаграмм временных рядов на одной странице, каждая из которых содержит две строки.

Используя пример на this page для нескольких диаграмм, у меня есть код, работающий с одиночными линиями на каждом графике. Но я не уверен, как лучше всего изменить этот пример для работы с многолинейными диаграммами.

Пример делает это:

d3.csv("sp500.csv", function(data) { 
    var formatDate = d3.time.format("%b %Y"); 

    d3.select("#example") 
     .datum(data) 
    .call(timeSeriesChart() 
     .x(function(d) { return formatDate.parse(d.date); }) 
     .y(function(d) { return +d.price; })); 
}); 

с TimeSeriesChart() определяется in this file.

Как бы я лучше всего адаптировал это, чтобы справиться с двумя (или более) строками (с одинаковыми значениями оси x и одинаковыми значениями)?

FWIW, мои данные находятся в массивах/хэшах JS, а не читаются из CSV, но я думаю, что принцип будет таким же.

Answer 1

Вы можете передать структуру данных, которая содержит данные для нескольких строк таким же образом. Единственное различие заключалось бы в том, как вы будете обрабатывать данные в указанном файле. Вы должны изменить функцию в

selection.each(function(data) { 

Во-первых, вам нужно адаптировать предварительную обработку, осуществляемую и аналогичным образом код, который определяет пределы осей. Далее вниз, вы бы изменить

// Update the line path. 
    g.select(".line") 
     .attr("d", line); 

к чему-то вроде

g.selectAll(".line").data(<data for your two lines here>) 
.enter() 
.append("path") 
.attr("class", "line") 
.attr("d", line); 

и удалить строку

gEnter.append("path").attr("class", "line"); 

до этого.

Точные изменения будут зависеть от формата, который вы передаете в.

Альтернативой (и если вы только начинаете, вероятно, легче) подход был бы просто добавить дополнительные данные в новый атрибут, добавьте новый генератор строк, который обращается к этим данным и повторяет код, который генерирует линию, и вызывает генератор строк с другим именем класса и другим генератором. Это хакерский подход, который я бы вообще не рекомендовал, но, возможно, было бы легче начать работу именно так.