Question

我有一套积分。我使用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 
        });            
}

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

Answer 1

要计算计数，您可以使用crossfilter：https://github.com/square/crossfilter。声明一个为x，y对提供x，y和count的维度，并将其用作数据源。然后，每个重叠集可能会被卡住一个圆圈。这实际上取决于您要向用户展示的内容。

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

1 个答案: