![](/img/trans.png)
[英]I change the min and max of the xaxis, but how to i change the 'navigator'?
[英]detect overlapping of circle and change xaxis domain from (0,max) to (min,max)
我創建了一個散點圖氣泡圖。 這是兩種情況
首先是因為總客戶之間的差異非常小,兩個圓圈重疊
第二個域從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正在翻譯。 在此實現中,我想知道找出重疊的方法。
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.