я пытаюсь добавить всплывающую подсказку с названиями районов, когда вы наводите указатель мыши на карту в d3.js. Ввод файла топойсона и ямы смогли успешно сгенерировать карту с границами районов и выделить выбранный район.

Для подсказки я попытался сделать что-то похожее наэтот, но ничего не происходит вообще. Код яМы используем приведено ниже. Код всплывающей подсказки ближе к концу.

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);
      } 

});

CSS это

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;         
}

Код, который я добавил для "подсказка» вообще ничего не делает Что я здесь не так делаю?

Файл topojson имеет этот формат. Я хотел получить "название" свойство отображаться во всплывающей подсказке.

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