javascript - d3.js悬停在 map 上不显示文本框，css问题

Question

我刚开始学习 javascript 和 css，最近我一直在玩 d3.js。我正在尝试显示一个州的 map 。 map 正在显示。我已经增加了地区边界的线宽，但我不能为州的外边界这样做。

此外，将鼠标悬停在州的每个地区时，我一直在尝试将文本框放在侧面，但没有发生。鼠标悬停还会改变区域的颜色以及边界线的宽度。为什么没有出现文本框？或者它出现在屏幕外的某个地方？我哪里出错了，我该如何解决这些问题？

    <script src="//d3js.org/d3.v5.min.js"></script>
<script src="//unpkg.com/topojson@3"></script>
<script>
  var width = 500,
    height = 500;
  const projection = d3.geoMercator()
    .center([88.4, 27.5])
    .translate([width / 2, height / 2])
    .scale(10000);
  const path = d3.geoPath()
    .projection(projection);

  const svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

  const g = svg.append('g');

  d3.json('https://raw.githubusercontent.com/shklnrj/IndiaStateTopojsonFiles/master/Sikkim.topojson')
    .then(state => {
      g.append('path')
        .datum({
          type: 'Sphere'
        })
        .attr('class', 'sphere')
        .attr('d', path);

      g.append('path')
        .datum(topojson.merge(state, state.objects.Sikkim.geometries))
        .attr('class', 'land')
        .attr('d', path);

      g.append('path')
        .datum(topojson.mesh(state, state.objects.Sikkim, (a, b) => a !== b))
        .attr('class', 'boundary')
        .attr('d', path);

      g.append("g")
        .attr("id", "dts")
        .selectAll("path")
        .data(topojson.feature(state, state.objects.Sikkim).features)
        .enter()
        .append("path")
        .attr("d", path)
        //.on("click", clicked)

        .on("mouseover", function(d) {
          d3.select("h2").text(d.properties.Dist_Name);
          d3.select(this)
            .attr("fill", "yellow")
            .attr("opacity", 1);
          var prop = d.properties;

          var string = "<p><strong>District Code</strong>: " + prop.State_Code + "</p>";
          string += "<p><strong>Disctrict Name</strong>: " + prop.Dist_Name + "</p>";

          d3.select("#textbox")
            .html("")
            .append("text")
            .html(string)
        })

        .on("mouseout", function(d) {
          d3.select(this)
            .attr("fill", "deeppink")
        })

        .attr("opacity", 0)
        .attr("fill", "deeppink")

    });

</script>

这是CSS部分:

    svg {
  background: #eeeeee;
}

.land {
  fill: #ff1a75;
}

.boundary {
  fill: none;
  stroke: #00ffff;
  stroke-width: 2px;
}

h2 {
  top: 50px;
  font-size: 1.6em;
}

.hover {
  fill: yellow;

}

#textbox {
  position: absolute;
  top: 600px;
  left: 50px;
  width: 275px;
  height: 100px;
}

#textbox text p {
  font-family: Arial, sans-serif;
  font-size: 0.8em;
  margin: 0;
}

Answer 1

尝试将您的脚本移动到#textbox元素下方。

svg {
  background: #eeeeee;
}

.land {
  fill: #ff1a75;
}

.boundary {
  fill: none;
  stroke: #00ffff;
  stroke-width: 2px;
}

h2 {
  top: 50px;
  font-size: 1.6em;
}

.hover {
  fill: yellow;
}

#textbox {
  position: absolute;
  top: 600px;
  left: 50px;
  width: 275px;
  height: 100px;
}

#textbox text p {
  font-family: Arial, sans-serif;
  font-size: 0.8em;
  margin: 0;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>

<div id="textbox"></div>

<!-- move your JS code here -->
<script>
  var width = 500,
    height = 500;
  const projection = d3.geoMercator()
    .center([88.4, 27.5])
    .translate([width / 2, height / 2])
    .scale(10000);
  const path = d3.geoPath()
    .projection(projection);

  const svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

  const g = svg.append('g');

  d3.json('https://raw.githubusercontent.com/shklnrj/IndiaStateTopojsonFiles/master/Sikkim.topojson')
    .then(state => {
      g.append('path')
        .datum({
          type: 'Sphere'
        })
        .attr('class', 'sphere')
        .attr('d', path);

      g.append('path')
        .datum(topojson.merge(state, state.objects.Sikkim.geometries))
        .attr('class', 'land')
        .attr('d', path);

      g.append('path')
        .datum(topojson.mesh(state, state.objects.Sikkim, (a, b) => a !== b))
        .attr('class', 'boundary')
        .attr('d', path);

      g.append("g")
        .attr("id", "dts")
        .selectAll("path")
        .data(topojson.feature(state, state.objects.Sikkim).features)
        .enter()
        .append("path")
        .attr("d", path)
        //.on("click", clicked)

        .on("mouseover", function(d) {
          d3.select("h2").text(d.properties.Dist_Name);
          d3.select(this)
            .attr("fill", "yellow")
            .attr("opacity", 1);
          var prop = d.properties;

          var string = "<p><strong>District Code</strong>: " + prop.State_Code + "</p>";
          string += "<p><strong>Disctrict Name</strong>: " + prop.Dist_Name + "</p>";

          d3.select("#textbox")
            .html("")
            .append("text")
            .html(string)
        })

        .on("mouseout", function(d) {
          d3.select(this)
            .attr("fill", "deeppink")
        })

        .attr("opacity", 0)
        .attr("fill", "deeppink")

    });
</script>