Question

我正在研究D3JS美国地图我在互联网上使用了以下图表获得了us.json文件，

D3js US Map 但我面临一个问题，我没有州名json但是我只想把佛罗里达州的名字放在佛罗里达州， I added tooltip successfully But I cant add Name "Florida" on map。

我想要这样：

enter image description here

任何人都知道如何在该路径位置添加此文本我也共享代码：

<!DOCTYPE html>
<meta charset="utf-8">

<style>

.background {
  fill: none;
  pointer-events: all;
}
.subunit-label {
  fill: #777;
  fill-opacity: .5;
  font-size: 20px;
  font-weight: 300;
  text-anchor: middle;
}

.state-boundary.active {
  fill: none;
stroke: #000;
stroke-width: 0.4;
}


path {
  fill: none;
  stroke: #FFF;
  stroke-width: .3px;
}

.onHvr{cursor:pointer; stroke: #000; }

.state-boundary{
  stroke-width:.4px;
stroke: #222;
cursor:pointer;
}

path#florida {
opacity: 1;
stroke-width: 1px;
stroke: rgb(0, 0, 0);
}

.land-boundary {
  stroke-width: .5px; 
  storke:#000;
}

.county-boundary {
  stroke: #1A1A1A;
  opacity:0.6;
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pp2 { fill:rgb(64, 91, 201);}
.pp1 { fill: #638CD5; }
.pp3 { fill: rgb(206, 5, 5); }
.pp4 { fill: rgb(240, 69, 69); }


</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>

var width = 960,
    height = 500,
     active = d3.select(null);

var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height)
    .on("click", reset);

var g = svg.append("g");

var us = {here is us.json file code I deleted becoz code is very lengthy};

 g.selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
      .enter().append("path")
      .attr("d", path)     
      .attr("id", function(d,i){return  us.objects.counties.geometries[i].id;})
      .on("click", reset)
      .attr("class", function(d,i) {
          if (us.objects.counties.geometries[i].id == 12099 ) {
            this.addEventListener("click",function(){
             location.href="http://demo.govdashboard.com/dashboards?id=30543";
            });           

            return  "pp3 onHvr";
          }
          else if( us.objects.counties.geometries[i].id == 12011 ){return  "pp2 onHvr";}                
          else if( us.objects.counties.geometries[i].id == 12086){return "pp4 onHvr";}
          else if(i % 4 == 3){return "county-boundary pp3"}
          else if(i % 4 == 2){return "county-boundary pp1"}
          else if(i % 4 == 1){return "county-boundary pp2"}
          else if(i % 4 == 0){return "county-boundary pp4"}
      });

console.log(us.objects);

      g.select(".pp1.onHvr").append("title")
        .text(function(d,i){return  "Palm Beach";}); 

      g.select(".pp2.onHvr").append("title")
        .text(function(d,i){return  "Broward";});  

      g.select(".pp3.onHvr").append("title")
        .text(function(d,i){return  "Miami Dade";});     


  g.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("d", path)
      .attr("class", "land-boundary");

  g.selectAll()   
      .data(topojson.feature(us, us.objects.states).features)  
      .enter().insert("path")
      .attr("class", "state-boundary") 
      .attr("d", path) 
      .attr("id", function(d,i) { 
            if (i == 48) {return  "florida";}
            else{return "states-boundary"}})
      .attr("class", function(d,i) { 
            if (i % 4 == 3 || i == 48) {return  "state-boundary pp1";}
            else if(i % 4 == 2){return  "state-boundary pp2";}
            else if(i % 4 == 1 ){return  "state-boundary pp3";}
            else if(i % 4 == 0 ){return  "state-boundary pp4";}}) 
      .on("click", clicked);            

    g.select("#florida.state-boundary.pp1").append("title")
        .text(function(d,i){return  "Florida";});   


function clicked(d) {
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bounds = path.bounds(d),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  g.transition()
      .duration(750)
      .style("stroke-width", 1.5 / scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")")    
}

function reset() {
  active.classed("active", false);
  active = d3.select(null);

  g.transition()
      .duration(750)
      .style("stroke-width", "1.5px")
      .attr("transform", "");
}


</script>



</body>
</html>

如何在svg路径中的D3JS Map上添加文本？

0 个答案: