检测圆的重叠并将 xaxis 域从 (0,max) 更改为 (min,max)答案

【问题标题】：detect overlapping of circle and change xaxis domain from (0,max) to (min,max)检测圆的重叠并将 xaxis 域从 (0,max) 更改为 (min,max)
【发布时间】：2015-04-16 07:49:28
【问题描述】：

我创建了一个散点图气泡图。这是两种情况

首先是因为总客户之间的差异非常小，两个圈子重叠

第二个域是从 0,max

我想要一种方法，以便它自动读取任何两个圆是否重叠，那么 xaxis 的域应该是 min,max 否则它应该是 0,max

我正在创建这样的气泡图

var gnodes = svg.selectAll('g.node')
                    .data(this.options.data.events)
                    .enter()
                    .append('g')
                    .classed('gnode', true)
                    .attr("transform", function(d) { return "translate(" +  x(d.Total_Customers) + "," +  y(d.TotalSales) + ")"; })
                    .on('mouseover', tip.show)
                    .on('mouseout', tip.hide);
        var circles = gnodes.append("circle").transition().duration(transTime).style("filter","url(#drop-shadow)")
                        .attr("class", "node").style("fill", function(d) { return color(d.Total_visits);})
                        .attr("r", function(d,i){ return r(d.Total_visits);});

这是我的 xaxis

getX: function(){
        var temp = 0//this.getMinX();
        return d3.scale.linear().range([0, this.options.width]).domain([temp,this.getMaxX()]);
    }

！！注意：我的气泡图实现不是基于 cx 和 cy。它的 g 正在被翻译。在这个实现中，我想知道找出重叠的方法。

【问题讨论】：

我唯一的猜测是有一个由 if 语句设置的域的比例尺，根据每个变换之间的差异（如果 transform1-transform2

标签： javascript d3.js data-visualization

【解决方案1】：

https://stackoverflow.com/a/8367547/3513695

上述算法将解决您的问题。以下是根据您的要求找到所需域的最小值的函数

var getDomainMinValue = function(data){
   var radiiDiff, radiiSum, centreDist; 
    for (var i =0 ; i < data.length ; i++) {
       for (var j = i+1; j < data.length; j++) {
           radiiDiff = Math.pow(r(data[i].Total_visits) - r(data[j].Total_visits),2)
           radiiSum = Math.pow(r(data[i].Total_visits) + r(data[j].Total_visits),2)
           centreDist = Math.pow(x(data[i].Total_Customers) - x(data[j].Total_Customers),2) + Math.pow(y(data[i].TotalSales) - y(data[j].TotalSales),2)
           if((radiiDiff <= centreDist) && (centreDist <= radiiSum)) {
              //return the min value
              return d3.min(data.map(function(d) { return d.TotalSales }));
            }
        }
     }
     // return 0 otherwise
     return 0;
}

【讨论】：