Question

我正在使用d3.js在传单地图上呈现人口普查区块的热图。当鼠标悬停在块上时，我想在地图右侧的固定div中显示有关人口普查区块的信息。无论我做什么，信息都会显示在地图下方而不是地图右侧。我是d3的新手，我正在尝试修改与我发现的一些工具提示示例相关的代码。

我的所有代码都在下面（对不起）;但是，我认为最相关的药水是div.info的css和reset（）函数中的.on（＆＃34; mouseover＆＃34; ...）部分。任何建议将不胜感激。

<html>  
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<style>
svg {
  position: relative;
}

div.tooltip {   
  /*position: absolute; (to make the tooltip follow mouse in map, uncomment this line)*/ 
  text-align: center;           
  width: 150px;                  
  height: 25px;                 
  padding: 2px;             
  font-size: 10px;     
  background: #FFFFE0;
  border: 1px;      
  border-radius: 8px;           
  pointer-events: none;         
}        


div.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
}
</style>

<h1>This file presents a map of MidTown area in Tallahassee, Florida.</h1>

<body>
    <div id="map" style="width: 900px; height: 600px"></div>
<script type="text/javascript" src="./d3.v3.js" charset="utf-8"></script>
<!--<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>-->
<script type="text/javascript" src="./leaflet.js"></script>
<script>
var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];

var div = d3.select("body").append("div")   
  //.attr("class", "tooltip")
  .attr("class", "info")
  .style("opacity", 0);

function initmap() {
    // set up the map
    map = new L.Map('map');

    // create the tile layer with correct attribution  15/30.4606/-84.2973
    //var osmUrl='http://www.openstreetmap.org/#map=13/30.4467/-84.3087';
//var osmUrl='http://osm.org/go/ZGUQ8RJ';
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 18, attribution: osmAttrib});       

// start the map in Tallahassee Florida
map.setView(new L.LatLng(30.4606,-84.2780),15);
//map.setView(new L.LatLng(51.3, 0.7),9);
map.addLayer(osm);
 }
 initmap();


var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");


d3.json("./flare5.json", function(json) {

    var color = d3.scale.quantile()
        .domain([0,11,51,101,251,501,901,1201,1500])
        //.range(["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]);  //red scale
        //.range(["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"]);  //green scale
        .range(["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]);  //blue scale

    //var group = canvas.selectAll("g")
    //  .data(json.features)
    //  .enter()
    //  .append("g")

    var projection = d3.geo.mercator()
        .center([-84.49,30.44])
        .translate([1000/2,800/2])
        .scale([75000]);



    var transform = d3.geo.transform({point: projectPoint}),
        path = d3.geo.path().projection(transform);


    var feature = g.selectAll("path")
        .data(json.features)
        .enter().append("path");


    map.on("viewreset", reset);
    reset();



    // Reposition the SVG to cover the features.
    function reset() {
        var bounds = path.bounds(json),
            topLeft = bounds[0],
            bottomRight = bounds[1];

        svg .attr("width", bottomRight[0] - topLeft[0])
            .attr("height", bottomRight[1] - topLeft[1])
            .style("left", topLeft[0] + "px")
            .style("top", topLeft[1] + "px");

        g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

        //feature.attr("d", path)
        var areas = feature.attr("d", path)
        .attr("class","area")
        //.attr("fill","steelblue");
        .attr("fill", function(d){
            var value = d.properties.population;
            return color(value);
            })
        .attr("fill-opacity", .5)

        //Adding mouseevents
        .on("mouseover", function(d) {
            d3.select(this).transition().duration(300).style("opacity", .5);
            div.transition().duration(300)
            .style("opacity", 1)
            div.text(d.id + " : Pop.:" + d.properties.population +"; Med. Age:" + d.properties.median_age);
            //.style("left", (d3.event.pageX) + "px")
            //.style("top", (d3.event.pageY -30) + "px");
        })
        .on("mouseout", function() {
            d3.select(this)
            .transition().duration(300)
            .style("opacity", 0.8);
            div.transition().duration(300)
            .style("opacity", 0);
        })
        }

         // Use Leaflet to implement a D3 geometric transformation.
    function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
    }
});




</script>
</body>
</html>

d3如何在固定div中鼠标悬停时显示文本 - 而不是工具提示

0 个答案: