如何从聚合数据中预先计算 alpha 水平？答案

【问题标题】：How do I pre-calculate an alpha level from aggregated data?如何从聚合数据中预先计算 alpha 水平？
【发布时间】：2015-05-02 00:28:45
【问题描述】：

下面的 svg 代码绘制了四个点，由于点重叠，每个点都有不同的透明度。

数据包含一个圆的位置和该位置的圆数。此处的演示数据还表明，由于各种原因，这种聚合并不完美——它们可能是同一位置的两个条目，都表明那里有几个圆圈。

我想计算并显示实际透明度，就好像我以完全未汇总的形式提供了数据一样 - 例如在此示例数据集中，未聚合的表单将在位置 3 处包含三个圆圈条目，并且位置 3 处的圆圈的透明度将与位置 4 处的圆圈的透明度相同。

我如何计算每个点应该使用的 alpha 级别以获得此结果？请注意，我不想事先处理数据以获得未聚合的表单，因为聚合它的原因是为了防止绘制大量 svg 元素，这将是非常密集的处理。

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <svg id="canvas"></svg>
        <script>
         var svg = d3.select("#canvas");
            svg.selectAll("circle")
                .data(
                        [
                            [1,1], 
                            [2,6], 
                            [3,1],
                            [3,2],
                            [4,1],
                            [4,1],
                            [4,1]
                        ]
                    )
            .enter().append("circle")
                .attr("cy", 60)
                .attr("cx", function(d) { return d[0] * 50; })
                .attr("r", 20)
                .attr("stroke-opacity", 0.3)
                .attr("fill-opacity", 0.3);
         </script>

    </body>
</html>

【问题讨论】：

标签： svg d3.js transparency alphablending

【解决方案1】：

基本上，您需要将给定位置的所有圆相加（即，在位置 3，您有 1+2 = 3，位置 4 = 1+1+1 = 3），然后除以每个位置的圈数（位置 3 = 2，位置 4 = 3）。这应该为您计算各个圆圈的不透明度提供一致的值。请参阅下面的 sn-p。有趣的是：

function opacity(d) {
    var count = data.filter(function(e) { return e[0] == d[0]; }).length,
    sum = d3.sum(data.filter(function(e) { return e[0] == d[0]; }), function(e) { return e[1]; });
    return (sum * .1) / count;
}

var data =  [
                            [1,1], 
                            [2,6], 
                            [3,1],
                            [3,2],
                            [4,1],
                            [4,1],
                            [4,1]
                        ]
function opacity(d) {
    var count = data.filter(function(e) { return e[0] == d[0]; }).length,
    sum = d3.sum(data.filter(function(e) { return e[0] == d[0]; }), function(e) { return e[1]; });
    return (sum * .1) / count;
}  

var svg = d3.select("#canvas");
            svg.selectAll("circle")
                .data(data)
            .enter().append("circle")
                .attr("cy", 60)
                .attr("cx", function(d) { return d[0] * 50; })
                .attr("r", 20)
                .attr("stroke-opacity", opacity)
                .attr("fill-opacity", opacity);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="canvas"></div>

【讨论】：