2014-09-25 5 views
3

В настоящее время нет примера в Интернете для пузырьковой диаграммы с легендой, используя dc.js, с функцией dc.legend().Можно ли сделать легенду для Bubble Chart?

that.sessions_scatterplot 
     .width(830) 
     .height(350) 
     .transitionDuration(1000) 
     .margins({top: 100, right: 10, bottom: 30, left: 25}) 
     .dimension(that.dim_Source) 
     .group(that.fact_Source_Sessions) 
     .ordinalColors(["#70c5a4","#8cd4f2","#fdc976","#9d97c8"]) 
     .colorAccessor(function(d){ 
      return d.value.src_category; 
     }) 
     .keyAccessor(function (d) { 
      var x = d.value.avg_time/d.value.count; 
      return x; 
     }) 
     .valueAccessor(function (d) { 
      var y = d.value.hundred_bounce_rate/d.value.count; 
      return y; 
     }) 
     .radiusValueAccessor(function (d) { 
      var r = Math.round(d.value.sessions/d.value.count); 
      return r; 
     }) 
     .title(function(p){ 
      return [p.key, 
       "Average Time On Page: " + (p.value.avg_time/p.value.count).toFixed(2), 
       "100 - Bounce Rate: " + (p.value.hundred_bounce_rate/p.value.count).toFixed(2), 
       "Sessions/Page Views: " + (p.value.sessions/p.value.count).toFixed(2)] 
       .join("\n"); 
     }) 
     .renderTitle(true) 
     .maxBubbleRelativeSize(0.03) 
     .x(d3.scale.linear().domain(that.avg_time_extent).range([0,that.width])) 
     .y(d3.scale.linear().domain(that.hundred_bounce_rate_extent).range([0,that.height])) 
     .r(d3.scale.linear().domain(that.sessions_pg_views_extent)) 
     .minRadiusWithLabel(30) 
     .yAxisPadding(0.5) 
     .xAxisPadding(500) 
     .xAxisLabel('Average Time On Page') 
     .yAxisLabel('100 - Bounce Rate') 
     .legend(dc.legend().x(200).y(30).gap(5).horizontal(true).itemWidth(100).legendWidth(200)); 

Там MUST быть каким-то образом использовать легенды в диаграмме Bubble.
Предположения:
1) Использовали верхние поля.
2) Используется функция colorAccessor() для окраски пузырьков с помощью группы.
3) Элемент 'g' присоединяется к 'svg', а класс 'dc-legend' присваивается элементу 'g'. Но в легенде нет дочерних элементов.

+0

Я считаю, что это не поддерживается напрямую dcjs. Вам придется взломать https://github.com/dc-js/dc.js/blob/master/src/bubble-chart.js и занять некоторое вдохновение из https: // GitHub. com/dc-js/dc.js/blob/master/src/composite-chart.js # L363 или другие примеры, имеющие поддержку легенд – Navyseal

ответ

2

Сообщалось о github здесь: https://github.com/dc-js/dc.js/issues/485.

Однако, насколько я знаю, я считаю, что вам придется взломать его, если вы хотите, чтобы в этом случае была легенда.

Смежные вопросы