Несколько диаграмм области с D3.js

Question

Я интегрирую несколько проектов inmy в библиотеки d3js, и на этом шаге я хочу нарисовать диаграмму с несколькими областями, отображающую значения (от 0 до 100%) из 5 (x, y, z, r е) указывает в зависимости от времени так же, как это: http://tympanus.net/Tutorials/MultipleAreaChartsD3/ ... в моем случае входной массив

var data = 
[{"Year":"2011","x":"63.4","y":"62.7","z":"12.2","t":"44.2","e":"22.2"},    
{"Year":"2012","x":"75.4","y":"32.7","z":"78.2","t":"82.2","e":"92.2"}, 
{"Year":"2013","x":"773.4","y":"20.7","z":"92.2","t":"75.4","e":"52.2"}]; 

, как это определено в моем коде: http://jsfiddle.net/amani1988/cfk8Y/ Я только что отредактировали несколько строк исходного кода, но есть проблемы при отображении значений y, z, r, e также являются вопросами css. Вопрос: как читать данные proprely из формы массива?

Answer 1

Ну, похоже, вы правильно прочитали данные из того, что я вижу. Я раздвоенный вашей скрипку here и все, что я сделал изменить некоторые CSS, чтобы отразить имена переменных, т.е. я изменил страну к й, у, г, т, е, как в:

g.x path.chart{ 
     fill: rgb(127,201,127); 
    } 

Единственного изменение Я сделал был в maxDataPoint, который в том числе колонки года в расчете максимального, так что я просто исключил его в заявлении, если, как в:

data.forEach(function(d) { 
    for (var prop in d) { 
    console.log(d[prop]) 
    if (d.hasOwnProperty(prop)) { 
     d[prop] = parseFloat(d[prop]); 
    if (d[prop] > maxDataPoint && prop !== "Year") { 
     console.log(prop) 
     maxDataPoint = d[prop]; 
    } 
    } 
}; 

Я думаю, что это то, что вы были после того, как в любом случае.

EDIT 

И добавить цвета вам нужно добавить атрибут заливки к поколению пути, как в (последней строке):

this.chartContainer.append("path") 
         .data([this.chartData]) 
         .attr("class", "chart") 
         .attr("clip-path", "url(#clip-" + this.id + ")") 
         .attr("d", this.area) 
         .attr("fill", function (d,i) { return colours(options.id); }); 

Наполнитель или цвет определяется через пользовательскую функцию, используя идентификатор из варианты и порядковая шкала для цветов (один из встроенного цветовых гамм от d3 на основе Color Brewer) определяются как:

var colours = d3.scale.category20(); 

вы должны объявить это как глобальные, так что вы можете получить доступ к нему в диаграмме функция. Вы можете узнать больше о порядковых шкалах here.

Я обновил fiddle с этим.