Question

我正在尝试获取一个D3.js交互式地图，将其悬停在某个自治市（划分为svg路径）上时，将返回该自治市中逃生室主题的名称和数量。但是，我无法获得selectAll（“ path”）或对其进行任何修改。

这是我的代码：

d3.json("data/seoul_municipalities_topo_simple.json", function(error, data) {
  var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
  seoulmap.selectAll("path")
    .data(features)
    .enter().append("path")
    .attr("class", function(d) {
      console.log();
      return "municipality c" + d.properties.SIG_CD
    })
    .attr("id", function(d) {
      return d.properties.SIG_KOR_NM
    })
    .attr("d", path); /* the path variable holds the geoPath from my topojson file*/
});

//tooltip displays
var mouselocation;
var tooltip = d3.select(".tooltip");
var mappath = d3.selectAll("path"); /* this doesn't work */

mappath.on('mouseenter', function() {
  tooltip.style('display', 'block');
  let textID = this.id;
  tooltip.select(".tooltip-city")
    .html("<strong>" + textID + "</strong></br>");

  tooltip.select(".tooltip-num")
    .html("# of Themes: ");
}).on('mousemove', function() {
  mouselocation = d3.mouse(d3.select('body').node());
  tooltip.style("left", mouselocation[0] + 160 + "px")
    .style("top", mouselocation[1] + 10 + "px");
}).on('mouseleave', function() {
  tooltip.style('display', 'none');
});

当我在控制台上运行网站时，svg中的每个元素都分为包含类.municipality的路径。通过选择不起作用。但是，如果我将选择器替换为其他东西，说“ svg”，则就像一个符咒。我不确定在这里我在做什么错吗？

（我正在使用D3.js v4！）

d3.js selectAll用于路径

0 个答案: