微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在d3.js路径中添加工具提示?

如何解决如何在d3.js路径中添加工具提示?

我正在使用d3.js topo和d3.js路径从geojson数据构建楼层地图。为了澄清起见,我也使用vue.js。当用户将鼠标悬停在一个房间(即d3.js路径)上时,我想添加一个工具提示。首先,我只在用户将鼠标悬停在某个路径上时添加了控制台日志,但这没有用。我注意到,每次我加载该应用程序时,它都会生成一个控制台日志,但是当用户单击d3.js路径时,却不会。我听说有人说我必须创建一个不可见的圆形或矩形,将其绑定有tooltip属性,但是一旦楼层图变得复杂,我认为该路线将不起作用。我现在不在乎将任何实际数据添加到工具提示中,但稍后我会想要。有人可以指出我正确的方向吗?谢谢。

const data = {
  "type": "FeatureCollection","features": [{
      "type": "Feature","properties": {},"geometry": {
        "type": "polygon","coordinates": [
          [
            [
              0,0
            ],[
              0,11.4
            ],[
              7,0
            ]
          ]
        ]
      }
    },{
      "type": "Feature","coordinates": [
          [
            [
              7,[
              12,"coordinates": [
          [
            [
              12,[
              19,0
            ]
          ]
        ]
      }
    }
  ]
};
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")

svg.attr("transform","translate(" + width / 2 + ",0)")

var projection = d3.geoIdentity().fitSize([width,height],data)
var path = d3.geoPath(projection)

svg.selectAll("path")
  .data(data.features)
  .enter()
  .append("path")
  .attr("d",path)
  .attr("fill","grey")
  .attr("fill-opacity",.2)
  .attr("stroke","black")
  .attr("stroke-width",1.5)
  .on("mouSEOver",console.log("hello"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="200"></svg>

解决方法

有几种方法可以做到这一点。最简单(但最受限制)的方法是在每个path中创建一个<title> element。它将以悬停形式显示,因为它是浏览器的本机。

const data = {
  "type": "FeatureCollection","features": [{
      "type": "Feature","properties": { "name": "Kitchen" },"geometry": {
        "type": "Polygon","coordinates": [
          [
            [
              0,0
            ],[
              0,11.4
            ],[
              7,0
            ]
          ]
        ]
      }
    },{
      "type": "Feature","properties": { "name": "Living room" },"coordinates": [
          [
            [
              7,[
              12,"properties": { "name": "Toilet" },"coordinates": [
          [
            [
              12,[
              19,0
            ]
          ]
        ]
      }
    }
  ]
};
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")

svg.attr("transform","translate(" + width / 2 + ",0)")

var projection = d3.geoIdentity().fitSize([width,height],data)
var path = d3.geoPath(projection)

svg.selectAll("path")
  .data(data.features)
  .enter()
  .append("path")
  .attr("d",path)
  .attr("fill","grey")
  .attr("fill-opacity",.2)
  .attr("stroke","black")
  .attr("stroke-width",1.5)
  .append("title")
  // Do this to maintain access to the features you drew
  .datum(function(d) { return d; })
  .text(function(d) {
    return d.properties.name;
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="200"></svg>

更复杂的用户可以使用绝对定位的div,例如:

const data = {
  "type": "FeatureCollection","properties": {
        "name": "Kitchen"
      },"properties": {
        "name": "Living room"
      },"properties": {
        "name": "Toilet"
      },0
            ]
          ]
        ]
      }
    }
  ]
};
var svg = d3.select("svg")
var width = +svg.attr("width")
var height = +svg.attr("height")
var tooltip = d3.select("#tooltip")

svg.attr("transform",1.5)
  .on("mousemove",function(d) {
    // +3 as some offset to make sure spawning the tooltip doesn't
    // accidentally also cause unhover and thus removing itself
    tooltip
      .html(d.properties.name)
      .style("display","block")
      .style("left",d3.event.x + 3 + 'px')
      .style("top",d3.event.y + 3 + 'px');
  })
  .on("mouseleave",function() {
    tooltip
      .style("display",null)
      .style("left",null)
      .style("top",null);
  });
#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  border: solid 1px red;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="200"></svg>
<div id="tooltip"></div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。