是否可以为气泡图制作图例？

Posted 2023-02-16

【中文标题】是否可以为气泡图制作图例？

【英文标题】：Is it possible to make a legend for Bubble Chart?

【发布时间】：2014-11-20 07:55:16

【问题描述】：

目前互联网上没有使用 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' 元素。但是该图例没有子元素。

【问题讨论】：

我相信 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 或其他具有传奇支持的示例中获取一些灵感

查看这个答案 - 破解它并不难：***.com/a/50532425/676195

【参考方案1】：

这里在 github 上讨论过：https://github.com/dc-js/dc.js/issues/485。

但是，据我所知，如果您想在这种情况下获得传奇，我相信您将不得不破解它。