Можно ли сделать легенду для Bubble Chart?

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

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));

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


person Isha    schedule 25.09.2014    source источник
comment
Я считаю, что это не поддерживается dcjs напрямую. Вам придется взломать github.com/dc -js/dc.js/blob/master/src/bubble-chart.js и черпайте вдохновение из github.com/dc-js/dc.js/blob/master/src/composite-chart.js#L363 или другой примеры с поддержкой легенды   -  person Navyseal    schedule 05.12.2014
comment
См. этот ответ - взломать его не так уж сложно: stackoverflow.com/a/50532425/676195   -  person Gordon    schedule 25.05.2018


Ответы (1)


Об этом говорилось на github здесь: https://github.com/dc-js/dc.js/issues/485.

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

person Ben Leitner    schedule 05.07.2015