D3 Examples - Map with area sales tooltip

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: #000;
  stroke-width: .5px;
}
​
.town-boundary {
 stroke: black;
 stroke-width: 0.5px;
}
​
.county-boundary {
  
  stroke: black;
  stroke-width: 1px;
}
​
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 150px;                         
  padding: 2px;    
  font-family: Microsoft JhengHei;  
  font: 12px;        
  background: lightsteelblue;   
  border: 1px;      
  border-radius: 5px;           
  pointer-events: none;         
}
​
</style>
<body>
<div>
<b><h2>Area sales performance <h2/></b>
 </div >
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
​
<script>
//var data2 = d3_dsv.csvParse("TownPopulation104.csv");
​
var width = 800,
    height = 800;
/*宣告投影方式*/  
var projection =  d3.geo.mercator().center([123,24.5]).scale(6000);
/*宣告畫地理圖的方法，並把投影方式帶入*/
var path = d3.geo.path().projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var commaFormat = d3.format(','); //千位數符號轉換 
​
var div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);
​
​
/*宣告tip*/
//var tip = d3.tip()
//  .attr('class', 'd3-tip')
//  .offset([-10, 0])
//  .html(  function(d) {
//return "<div id='tooltip'  style='background-color:#F2F6F8;border-style: solid;border-width:0.5px'> <text style='font-family:SimSun;align:center;color:Steelblue;font-size:15px'> "
//  + d.branch_name +
//   "</text> <br><text style='align=center;color:green;font-size:15px'>"
//   + commaFormat(d.density) 
//   "</text> </div>";
// });
 
 /*呼叫tip*/
//svg.call(tip);
​
/*準備畫縣界的資料*/
d3.json("county.json", function(error, topology) {
  if (error) throw error;
  /*topojson解析資料*/
  var features_county = topojson.feature(topology, topology.objects["county"]).features;
     
         /*準備畫鄉鎮村里的資料*/
         d3.json("town.json", function(error, topology) {
         if (error) throw error;
​
         /*topojson解析資料*/
         var features_town = topojson.feature(topology, topology.objects["town"]).features;
                 //畫鄉鎮村里界
                     
         /*色階變化的range  參考https://www.color-hex.com/ */
         var color = d3.scale.linear().domain([0,10000000]).range(["#6bcdea","#d82e84"]); 
         //var townPopDensity=[];
           
             d3.csv("taiwan_sales.csv", function(error, data) {
                 if (error) throw error;
                    
                    /* csv資料以JSON表示 (使用d3.map)  */
                      var obj = d3.map(data, function(d)
                      {
                          return d.site_id.substring(0, 3); 
                        });
                    
                     /*對應每個縣市的資料*/
                      obj.forEach(function(k,v){
                          this[k] = v.daily_sales;  
                          // this[k] = ; 
                        });
                        
                           var obj2 = d3.map(data, function(d)
                      {
                          return d.site_id.substring(0, 3); 
                        });
                    
                     /*對應每個縣市的資料*/
                      obj2.forEach(function(k,v){
                          this[k] = v.branch_name;  
                          // this[k] = ; 
                        });
                    console.log(obj2);
                    
                    /*在feature_town的資料集合裡面，新增一"density"欄位，以key:value的方式對應obj內的值*/
                    for(idx=features_county.length - 1; idx>=0; idx--)
                    {
                    features_county[idx].density = obj[features_county[idx].properties.C_Name];
                    features_county[idx].branch_name = obj2[features_county[idx].properties.C_Name];
                    }
                    //console.log(obj[features_town[1].properties.T_Name]);
                                 
                           
                     /*畫縣界(最後畫避免被fill遮蔽)*/        
                      svg.selectAll("path-county")
                      .data(features_county)
                      .enter().append("path")
                      .attr("d", path)
                      .attr("class", "county-boundary")
                      .attr({
                                 d: path,
                                 fill: function(d) { return d.density== undefined ? '#E0FFFF' : color(d.density) ; }
                                      //(question)?(result if true):(result is false)
                               })
                       /*設置滑鼠移動過後的變化*/
                           .on('mouseover', function(d, i) {
                         
                                                      
                             d3.select(this)
                             .transition()
                             .style("stroke-width", 2);  
​
                             div.transition()        
                                .duration(300)      
                                .style("opacity", 0.9); 
                                
                          d.density== undefined ? undefined : 
                          div.html( d.branch_name + "<br>" +  commaFormat(d.density) ) 
                               .style("left", (d3.event.pageX) + "px")     
                               .style("top", (d3.event.pageY - 50) + "px");    
                           
                           d3.select(this).style('fill-opacity', .5);    //控制bar的顏色透明度
                        
                           })
                           .on('mouseout', function(d, i) { 
                           //tip.hide                                                         //tip隱藏
                            d3.select(this)
                              .transition()
                              .style("stroke-width", 1); 
                            div.transition()        
                               .duration(300)      
                               .style("opacity", 0);   
                           d3.select(this).style('fill-opacity', function(d){ return 1});  //控制bar的顏色透明度
                           })
                           ;
                        
                          svg.selectAll("path-town")
                          .data(features_town)
                          .enter()
                          .append("path")
                           .attr("d", path)
                          .attr("class", "town-boundary")
                          .attr("stroke-dasharray","1,1")
                          .attr("fill","none") ;    
​
     });
  
​
​
  });
                            
 
});
</script>
​
    