d3地图浮框

最新推荐文章于 2023-08-01 23:29:20 发布

jdk137

最新推荐文章于 2023-08-01 23:29:20 发布

阅读量418

点赞数

分类专栏：前端组件-web开发

本文链接：https://blog.youkuaiyun.com/jdk137/article/details/106894815

版权

前端组件-web开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用d3.js库，在中国地图上实现鼠标悬停时显示省份浮框的功能。浮框内容自定义，位置动态跟随鼠标，提供详细的地图交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

d3地图浮框。中国地图鼠标滑动到每一个省的时候，都能显示出一个省的浮框。浮框的内容可以设置，位置跟随鼠标移动。

    function getFloatTag(node) {
      var $floatTagContainer = $(node);

      var FloatTagFactory = function() {
        var mouseToFloatTag = { x: 20, y: 20 };
        var setContent = function() {};
        //var canMove = true; // if move when it's show. true, false;
        var loc;
        var node;
        var container;
        var mousePannel;
        var timeOut;
        var globalScale = 1;
        //set floatTag location, warning: the html content must be set before call this func,
        // because jqNode's width and height depend on it's content;
        var _changeLoc = function(l) {
          //m is mouse location, example: {x: 10, y: 20}
          var m = l || loc;
          var x = m.x / globalScale;
          var y = m.y / globalScale;
          var floatTagWidth = node.outerWidth
            ? node.outerWidth()
            : node.width();
          var floatTagHeight = node.outerHeight
            ? node.outerHeight()
            : node.height();
          var mousex = mouseToFloatTag.x / globalScale;
          var mousey = mouseToFloatTag.y / globalScale;

          if (floatTagWidth + x + 2 * mousex <= $(container).width()) {
            x += mousex;
          } else {
            x = x - floatTagWidth - mousex;
          }
          if (y >= floatTagHeight + mousey) {
            y = y - mousey - floatTagHeight;
          } else {
            y += mousey;
          }
          node.css("left", x);
          node.css("top", y);
        };
        var _mousemove = function(e) {
          var offset = $(mousePannel).offset();
          if (!(e.pageX && e.pageY)) {
            return false;
          }
          var x = e.pageX - offset.left,
            y = e.pageY - offset.top;

          setContent.call(this);

          loc = { x: x, y: y };
        };

        var floatTag = function(cont, mouseP) {
          mousePannel = $(mouseP || cont);
          container = $(cont);
          node = $("<div/>").css({
            "z-index": 1000,
            visibility: "hidden",
            position: "absolute",

            border: "0px solid",
            "border-color": "rgba(0, 0, 0, 0.8)",
            "background-color": "rgba(114, 27, 27, 0.9)",
            color: "white",
            "border-radius": "2px",
            padding: "4px 40px 4px 15px",
            "font-size": "16px",
            "box-shadow": "3px 3px 6px 0px rgba(0,0,0,0.58)",
            "line-height": "150%",
            "text-align": "left"
            // "font-familiy": "宋体",
          });
          container.append(node);
          mousePannel.on("mousemove", _mousemove);
          mousePannel.on("tap", _mousemove);
          node.creator = floatTag;
          return node;
        };

        floatTag.setContent = function(sc) {
          if (arguments.length === 0) {
            return setContent;
          }
          setContent = sc;
          return floatTag;
        };

        floatTag.mouseToFloatTag = function(m) {
          if (arguments.length === 0) {
            return mouseToFloatTag;
          }
          mouseToFloatTag = m;
          return floatTag;
        };

        floatTag.fade = function() {
          timeOut = setTimeout(function() {
            node.css({
              visibility: "hidden"
            });
          }, 400);
        };

        floatTag.hide = function() {
          node.css({
            visibility: "hidden"
          });
        };

        floatTag.show = function() {
          clearTimeout(timeOut);
          node.css({
            visibility: "visible"
          });
        };

        floatTag.refresh = function() {
          clearTimeout(timeOut);
          floatTag.changeLoc();
          node.css({
            visibility: "visible"
          });
        };

        floatTag.changeLoc = _changeLoc;

        return floatTag;
      };
      var floatTag = FloatTagFactory()($floatTagContainer);
      floatTag.creator.mouseToFloatTag({ x: 30, y: 20 });
      $floatTagContainer.on("mouseleave", function() {
        floatTag.creator.hide();
      });
      return floatTag;
    },

		// 创建
      let floatTag = getFloatTag($(".chinamap"));
      
      	// 使用示例
        g.selectAll(".path")
          .data(geo.features)
          .enter()
          .append("path")
          .attr("class", "hover")
          .attr("stroke", "#fff")
          .attr("opacity", 0)
          .attr("stroke-width", d => {
            return d.properties.name === "澳门" ? "5" : "2";
          })
          .attr("fill", "transparent")
          // .attr('fill', 'rgba(0, 0, 0, .3)')
          .attr("d", path)
          .on("mousemove", function(d) {
          	// 改变位置
            floatTag.creator.changeLoc();
          })
          .on("mouseover", function(d) {
          	// 设置内容并显示
            floatTag.html(getFloatTagContent(d.properties.name));
            floatTag.creator.show();
          })
          .on("mouseout", function(d) {
          	// 设置内容并隐藏
            floatTag.creator.hide();
          });