Как нарисовать линию темпа роста в dc.js barChart?

Question

У меня есть Statewise, секторное (сельское хозяйство, производство, горнодобывающая промышленность и т. Д.) & годовых данные по ВВП Индии. Я создал приборную панель, которая находится по адресу India GDP. Теперь в барчарте я хочу нарисовать линию, указывающую темпы роста в каждый год. Я думаю, что это может быть сделано с помощью комбинированной диаграммы, но я не знаю, как рассчитать динамические темпы роста каждый раз, когда применяется фильтр. Кто-нибудь может дать руководство.

Answer 1

Вы правы, что должен быть стандартный способ сделать это. Проблема в том, что он не вписывается в способ обработки dc.js данными через crossfilter, и есть количество графических объектов, которые вы можете наложить на диаграмму.

Итак, на данный момент мы имеем рендеринг.

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

.on('renderlet', function(chart) { 
    var extra_data = [{x: chart.x().range()[0], y: chart.y()(10)}, 
         {x: chart.x().range()[1], y: chart.y()(70)}]; 
    var line = d3.svg.line() 
     .x(function(d) { return d.x; }) 
     .y(function(d) { return d.y; }) 
     .interpolate('linear'); 
    var path = chart.select('g.chart-body').selectAll('path.extra').data([extra_data]); 
    path.enter().append('path').attr('class', 'extra').attr('stroke', 'red'); 
    path.attr('d', line); 
}); 

Это рисует линию с левой стороны на правую сторону, от Y значение 10 - Y значение 70, используя шкалы x и y для получения координат SVG.

Я создал пример bar with extra line.

Надеюсь, это поможет вам начать работу!