Ich versuche, einen Tooltip hinzuzufügen, der den Namen der Bezirke anzeigt, wenn Sie in der Karte in d3.js den Mauszeiger darüber halten. Die Eingabe ist eine Topojson-Datei, und es ist mir gelungen, die Karte mit den Bezirksgrenzen zu erstellen und den aktuell ausgewählten Bezirk hervorzuheben.

Für den Tooltipp habe ich versucht, etwas Ähnliches zu tundiese, aber es passiert überhaupt nichts. Der von mir verwendete Code ist unten angegeben. Der Tooltip-Code ist zu Ende.

var width = 960,
    height = 600;

var projection = d3.geo.albers()
    .center([87, 28])
    .rotate([-85, 0])
    .parallels([27, 32]);

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

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

svg.append("rect")
    .attr("width", width)
    .attr("height", height);  

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

var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 1e-6);

d3.json("data/nepal3.json", function(error, npl) {
    var districts = topojson.feature(npl, npl.objects.nepal_districts);

    projection
      .scale(1)
      .translate([0, 0]);

    var b = path.bounds(districts),
      s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
      t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

    projection
      .scale(s)
      .translate(t);

      g.selectAll(".nepal_districts")
          .data(districts.features)
        .enter().append("path")
          .attr("class", function(d) { return "nepal_districts " + d.id; })
          .attr("d", path)
          .on("mouseover", function(d,i) {
              d3.select(this.parentNode.appendChild(this)).transition().duration(300)
                  .style({'stroke-width':2,'stroke':'#333333','stroke-linejoin':'round','cursor':'pointer','fill':'#b9270b'});
          })
          .on("mouseout", function(d,i) {
              d3.select(this.parentNode.appendChild(this)).transition().duration(100)
                  .style({'stroke-width':2,'stroke':'#FFFFFF','stroke-linejoin':'round','fill':'#3d71b6'});
          });

      g.append("path")
          .datum(topojson.mesh(npl, npl.objects.nepal_districts, function(a, b) { return a !== b;}))
          .attr("d", path)
          .attr("class", "district-boundary");

      /* Tooltip */

      g.selectAll(".nepal_districts")
          .data(districts.features)
        .enter().append("text")
          .append("svg:rect")
            .attr("width", 140)
            .attr("height", 140)
            .text(function(d) { return d.properties.name; })
            .on("mouseover", mouseover)
            .on("mousemove", mousemove)
            .on("mouseout", mouseout);

      function mouseover() {
        div.transition()
            .duration(300)
            .style("opacity", 1);
      }

      function mousemove() {
        div
            .text(d3.event.pageX + ", " + d3.event.pageY)
            .style("left", (d3.event.pageX - 34) + "px")
            .style("top", (d3.event.pageY - 12) + "px");
      }

      function mouseout() {
        div.transition()
            .duration(100)
            .style("opacity", 1e-6);
      } 

});

Das CSS ist

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: #4c4c4c;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

Der Code, den ich für "Tooltip" hinzugefügt habe, macht überhaupt nichts. Was mache ich hier falsch?

Die Topojson-Datei hat dieses Format. Ich wollte, dass die Eigenschaft "name" im Tooltip angezeigt wird.

{
  "type": "Topology",
  "objects": {
    "nepal_districts": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Polygon",
          "id": 0,
          "properties": {
            "name": "HUMLA"
          },
          "arcs": [
            [
              0,
              1,
              2,
              3
            ]
          ]
        },