Начинающие d3 сложенных площадь графа

Question

Многие извинения за вероятно простой Q. Я посмотрел на пример страницы здесь: http://bl.ocks.org/mbostock/3885211# я тогда изменил строку:

d3.tsv("data.tsv", function(error, data) { 

быть

d3.csv("data.csv", function(error, data) { 

чтобы указать файл данных с содержимым:

date,Kermit,piggy,Gonzo,fuzzy,hogthrob,animal,floyd,Gabriel,Beaker,scooter,statler,waldorf,slim,sam 
13-Oct-31,113.44,435.15,19.57,60.55,53.02,268.28,87.34,1.98,0,31.68,0,21.59,4.82,11.31 
13-Nov-30,109.86,506.85,18.97,58.77,388.37,131.48,85.34,1.98,0,48.50,0,21.59,4.70,11.31 
13-Dec-31,113.46,644.88,19.57,60.57,669.47,0,87.46,1.98,0,80.97,0,21.59,4.82,11.43 

в обновлении браузера ось x и даты отображаются правильно, но только одна точка данных (для Kermit) построена так, как если бы это была единственная строка на графике.

Может ли кто-нибудь указать мне в правильном направлении. Будучи полным новичком d3, любая оценка была бы оценена.

Answer 1

Вопрос заключается в том, что каждая строка в данных, содержащихся в Stacked Area Chart суммах до 100. ваших данных, однако, подводит к разным значениям в каждой строке, а значение 'Kermit' является >100 для каждой даты. В результате, в то время как D3 рисует все пути для вашего набора данных, они не находятся в пределах графика.

Чтобы устранить эту проблему, вам необходимо инициализировать ось domain вашей оси y, чтобы она не ожидала, что ваши значения будут находиться в диапазоне [1, 100] по умолчанию. Вы можете добавить следующее после инициализации домена х-оси:

// Find the value of the day with highest total value 
var maxDateVal = d3.max(data, function(d){ 
    var vals = d3.keys(d).map(function(key){ return key !== "date" ? d[key] : 0 }); 
    return d3.sum(vals); 
}); 

// Set domains for axes 
x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain([0, maxDateVal]) 

Единственное изменение вам нужно сделать, чтобы остановить нормализации данных, сделав это изменение

return {date: d.date, y: d[name] * 1}; /// 100}; 

и закомментировать строки что форматирование текста на оси у в процентах:

var parseDate = d3.time.format("%y-%b-%d").parse; 
    //formatPercent = d3.format(".0%"); 
. 
. 
. 
var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    //.tickFormat(formatPercent); 

Смотрите полный пример в этом bl.ock.

внесение этих изменений, я получаю следующий график: