Javascript 如何更改d3js中重叠点的不透明度

我有一套观点。我用d3绘制。很多时候，有些点往往会重叠。我需要改变不透明度的点是重叠了很多。例如，具有相同位置x、y的点应该比不重叠的点暗得多。我不知道该怎么做。以下是我当前的点散点图代码

svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



    var tooltip = d3.select("body").append("div")   
                    .attr("class", "tooltip")               
                    .style("opacity", 0);

    x.domain(d3.extent(gdata, function(d) {  return d[xdata]; })).nice();
    y.domain(d3.extent(gdata, function(d) { return d[ydata]; })).nice();

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", -6)
        .style("text-anchor", "end")
        .text("sum("+xdata+")");

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("sum("+ydata+")")

    svg.selectAll(".dot")
        .data(gdata)
        .enter().append("svg:circle")


        .on("click", function(d) {
             console.log(d);
             var ele = d3.select(this);
             console.log("the ele is ",ele);
             clickdot(d,ele) ;// Cannot use this as of now
        })

        .on("mouseover", function(d) {   
            console.log("entered mouseover event");   
            tooltip.transition().duration(200).style("opacity", .9);      
            console.log("the object is d" ,d );
            tooltip.html(d[xdata] + " " + d[ydata])  
              .style("left", (d3.event.pageX) + "px")     
              .style("top", (d3.event.pageY - 28) + "px");
        })                  

        .on("mouseout", function(d) { 
            console.log("entered mouseout event");      
            tooltip.transition().duration(500).style("opacity", 0);   
        })
        .attr("class", "dot")
        .attr("r", 5.5)
        .attr("opacity", "0.6") // --> this should be changed. I guess
        .attr("stroke", "")
        .attr("cx", function(d) { return x(d[xdata]); })
        .attr("cy", function(d) { return y(d[ydata]); })
        .style("fill", function(d) { 
            if (d.pid == $('#id').val()) {
                   return "red" ;
            }
            return "#1f77b4" ; //blue coloe 
        });            
}

---

我想我需要在不透明度上添加一些条件。不知道如何指定

要计算计数，可以使用交叉过滤器：。 声明一个为该x，y对提供x，y和计数的维度，并将其用作数据源。

---

然后，每个重叠集可能会有一个圆。这实际上取决于您试图向用户显示的内容。

听起来您的问题不是如何根据重叠设置不透明度，而是给定一个圆，如何计算有多少其他圆重叠以及重叠的程度。设置不透明度是很重要的。计算重叠是复杂的。这个问题太宽泛了。你可以做一些研究，看看或考虑它是否值得实现。我已经有了坐标，可以告诉我这些点是重叠的。我需要做的就是，如果给定坐标的计数器更高，那么它的不透明度也会更高。不确定，如果这似乎是一项艰巨的任务。如果您已经知道每个点的重叠数，那么您可以使用d3.scale.linear或可能与域[0，/*数据集中的最大重叠数*/]和范围[5,1]非线性。然后使用.attropacity函数d{return opacityScaled.num_overlaps；}设置不透明度。