个人中心
gpt4 book ai didi

javascript - 当鼠标悬停在 D3js 中的其中一张 map 上时，如何显示来自多张 map 的工具提示

转载 作者：行者123 更新时间：2023-11-29 20:59:17 27 4
gpt4 key购买 nike

我有一个仪表板，其中包含两个独立的州 map ，显示基于 2014 年和 2012 年的不同数据。将鼠标悬停在 map 上时， map 分别显示区域名称。我需要做的是当我将鼠标悬停在两张 map 中的任何一张上时，同时在各自的 map 上显示 2012 年和 2014 年 map 的工具提示。我怎样才能同时显示两者。我将不胜感激任何帮助。谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test dashboard</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
	<style>
		#gujarat-viz-2017, #buttons {
			border-right: 1px solid #ccc
		}
		.container {
			background-color: #d5e8ec;
		}
		.const0 {
			display: none;
		}
		.emptyparty {
			fill:#f9f9f1;
		}

		.emptyparty:hover, .constituency:hover {
			fill:#ccc;
		}

		.hidden { display: none; }
		.showtooltip { position: absolute; z-index: 10000; background-color: #333;
		border-radius: 10px; color: #fff; padding: 5px; }

		/*Party colors*/
		.bjp{ fill: #f88101;}
		.inc{ fill: #6da736;}
		.ncp{ fill: #076598;}
		.gpp{ fill: #5a469d;}
		.ind{ fill: #25a29a;}
		.jdu{ fill: #eb4d4c;}
	</style>
</head>
<body>
	<div class="container">

		<div class="row">
			<div id="gujarat-viz-2014" class="col-md-6">
				<h2>2014</h2>

			</div>
			<div id="gujarat-viz-2012" class="col-md-6">
				<h2>2012</h2>
				
			</div>
		</div> <!-- .row -->
	</div>
	<script src="http://www.thehindu.com/static/js/jquery-1.10.2.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script>
		function map_function(map_settings){
  // Global variables
   var margin = { top: 50, left:50, right:50, bottom:50 },
        height = 400 - margin.top - margin.bottom,
        width = 500 - margin.left - margin.right;

  // Create SVG canvas with responsive resizing
  var svg = d3.select(map_settings["htmlelement"])
            .append("svg")
            .attr("viewBox", "0 0 " + width + " " + height)
            .attr("preserveAspectRatio", "xMinYMin")
              .append("g")
              .attr("class", "data"+map_settings["year"])

  // Add a tooltip to visualization
  var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden showtooltip')
            .attr('id', "tooltip"+map_settings["year"])

  // queue and read the topojson, json data file 
  d3.queue()
    .defer(d3.json, "https://api.myjson.com/bins/17m3if") 
    .defer(d3.json, map_settings.data) 
    .await(render_map)

  var projection = d3.geoMercator()
      .scale(3000)
      .center([71.5, 22.3])
      .translate([width / 2, height / 2])

  var geoPath = d3.geoPath()
      .projection(projection)

  function render_map(error, mapshape, mapdata){

      var constituency = topojson.feature(mapshape, mapshape.objects.collection).features;


      dataMap = {};
      mapdata.forEach(function(d){
        dataMap[d.constNo] = d;
      })

      var fill_function = function(d) {
        // d3.select(this).attr('fill', "white")                       
      } // end of mousemove_function

      var mousemove_function = function(d) {
        var constinfo = dataMap[d.properties.AC_NO];
        // console.log(constinfo.constituencyName)
        // console.log(d3.select(this).data()[0].properties)
        var html = "<p>"+constinfo.constituencyName+"</p>"
        tooltip.classed('hidden', false)
                          .html(html)
                          .style("left", (d3.event.clientX - 10) + "px")
                          .style("top", (d3.event.clientY - 45) + "px");       
      } // end of mousemove_function

      var class_function = function(d) {
        var constinfo = dataMap[d.properties.AC_NO];
        var className = "constituency ";
        if(constinfo !== undefined) {
          className += ("c"+constinfo.constNo+" ")
          className += constinfo.leadingParty.replace(/[^a-zA-Z ]/g, "").toLowerCase()
        } else {
          className += "emptyparty"
          className += " const"
          className += d.properties.AC_NO
        }                 
        return className;
      } // end of class_function

      var mouseout_function = function(d) {
        tooltip.classed('hidden', true)                         
      } // end of mousemove_function

      svg.selectAll(".constituency")
         .data(constituency)
         .enter().append("path")
         .attr("d", geoPath)
         .attr('class', class_function)
         .attr('fill', "white")
         .attr('stroke', "#e8e8e8")
         .attr('stroke-width', "0.5")
         .on('mouseover', mousemove_function)
         .on('mouseout', mouseout_function)

  } // render_map

  
} // map_function

		var gujarat_data_2014 = {
			htmlelement: "#gujarat-viz-2014",
			data: "https://api.myjson.com/bins/yolfr",
			year: "2014"
		};
		var gujarat_data_2012 = {
			htmlelement: "#gujarat-viz-2012",
			data: "https://api.myjson.com/bins/19ztxj",
			year: "2012"
		};

		map_function(gujarat_data_2014);
		map_function(gujarat_data_2012);
	</script>
</body>
</html>

最佳答案

我会修改你的 mousemove 和 mouseout 以同时在两个 map 上操作:

    var mousemove_function = function(d) {
        var constinfo = dataMap[d.properties.AC_NO];
        var html = "<p>" + constinfo.constituencyName + "</p>"
        var tooltips = d3.selectAll('.showtooltip');
        // get paths from all maps
        d3.selectAll('.c' + constinfo.constNo)
          .each(function(d,i){
            var pos = this.getBoundingClientRect();
            // operate on appropriate tooltip
            d3.select(tooltips.nodes()[i]).classed('hidden', false)
              .html(html)
              .style("left", (pos.x + pos.width/2) + "px")
              .style("top", (pos.y - pos.height/2) + "px");
          });
      } // end of mousemove_function

    var mouseout_function = function(d) {
        d3.selectAll('.showtooltip').classed('hidden', true);
    } // end of mousemove_function

运行代码here .

关于javascript - 当鼠标悬停在 D3js 中的其中一张 map 上时，如何显示来自多张 map 的工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47431750/

27 4 0
文章推荐： Android Image Picasso Square缓存大小
文章推荐： php - Android - PHP - WampServer - 数据库行无法更新？
文章推荐： 安卓。内存泄漏导致内存不足错误。使用查看寻呼机。
文章推荐： javascript - JS Regex 多个捕获组返回所有匹配项
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com