Svg 如何从聚合数据预计算alpha级别？_Svg_D3.js_Transparency_Alphablending

Svg 如何从聚合数据预计算alpha级别？

svg d3.js

Svg 如何从聚合数据预计算alpha级别？,svg,d3.js,transparency,alphablending,Svg,D3.js,Transparency,Alphablending,下面的svg代码绘制了四个点，每个点由于重叠而具有不同的透明度数据包括一个圆的位置和将在该位置的圆数。这里的演示数据还表明，由于各种原因，这种聚合并不完美——它们可能是同一位置的两个条目，这两个条目都表示有几个圆位于该位置我希望计算并显示实际透明度，就像我以完全未聚合的形式获得数据一样-例如，在本示例数据集中，未聚合的形式将在3位置的圆圈中有三个条目，而3位置圆圈的透明度将与透明度相同位于4位置的圆的形状如何计算每个点的alpha级别以获得此结果？请注意，我不想在获得未聚合的表单之前操作数

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

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

我希望计算并显示实际透明度，就像我以完全未聚合的形式获得数据一样-例如，在本示例数据集中，未聚合的形式将在

位置的圆圈中有三个条目，而

位置圆圈的透明度将与透明度相同位于

位置的圆的形状

如何计算每个点的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>


var svg=d3.选择（“画布”）；
svg.selectAll（“圆圈”）
.数据(
[
[1,1], 
[2,6], 
[3,1],
[3,2],
[4,1],
[4,1],
[4,1]
]
)
.enter（）.append（“圆”）
.attr（“cy”，60）
.attr（“cx”，函数（d）{返回d[0]*50；}）
.attr（“r”，20）
.attr（“笔划不透明度”，0.3）
.attr（“填充不透明度”，0.3）；

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

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数据=[
[1,1], 
[2,6], 
[3,1],
[3,2],
[4,1],
[4,1],
[4,1]
]
函数不透明度（d）{
var count=data.filter（函数（e）{returne e[0]==d[0]；}）.length，
sum=d3.sum（data.filter（函数（e）{returne e[0]==d[0]；}），函数（e）{returne e[1]；}）；
返回（总和*.1）/计数；
}  
var svg=d3.选择（“画布”）；
svg.selectAll（“圆圈”）
.数据（数据）
.enter（）.append（“圆”）
.attr（“cy”，60）
.attr（“cx”，函数（d）{返回d[0]*50；}）
.attr（“r”，20）
.attr（“笔划不透明度”，不透明度）
.attr（“填充不透明度”，不透明度）