时间戳

首页 > 解决方案 > 将带有值的状态标签和工具提示添加到 D3 美国地图

d3.js - 将带有值的状态标签和工具提示添加到 D3 美国地图

问题描述

附件是以下代码显示的屏幕截图。我正在绘制每个州的披萨餐厅数量。我在添加状态标签和工具提示时遇到问题，该提示向我显示每个状态的相应值到地图。我希望能够将鼠标悬停在一个状态上，然后有一个工具提示告诉我它是什么状态以及它的价值。这是我到目前为止所做的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">

/* Legend Font Style */
body {
    font: 11px sans-serif;
    background-color: #ffffff;
}

/* Legend Position Style */
.legend {
    position:absolute;
    left:20px;
    top:30px;
}


.axis text {
    font: 10px sans-serif;
}

.axis line, .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}



</style>
</head>
<body>
<script type="text/javascript">

//Width and height of map
var width = 960;
var height = 500;

var lowColor = '#f9f9f9'
var highColor = '#bc2a66'

// D3 Projection
var projection = d3.geoAlbersUsa()
  .translate([width / 2, height / 2]) // translate to center of screen
  .scale([1000]); // scale things down so see entire US

// Define path generator
var path = d3.geoPath() // path generator that will convert GeoJSON to             SVG paths
  .projection(projection); // tell path generator to use albersUsa       projection

//Create SVG element and append map to the SVG
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// Load in my states data!
d3.csv("statesdata.csv", function(data) {
    var dataArray = [];
    for (var d = 0; d < data.length; d++) {
        dataArray.push(parseFloat(data[d].value))
    }
    var minVal = d3.min(dataArray)
    var maxVal = d3.max(dataArray)
    var ramp =     d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor])

  // Load GeoJSON data and merge with states data
  d3.json("us-states.json", function(json) {

    // Loop through each state data value in the .csv file
    for (var i = 0; i < data.length; i++) {

      // Grab State Name
      var dataState = data[i].state;

      // Grab data value 
      var dataValue = data[i].value;

      // Find the corresponding state inside the GeoJSON
      for (var j = 0; j < json.features.length; j++) {
        var jsonState = json.features[j].properties.name;

        if (dataState == jsonState) {

          // Copy the data value into the JSON
          json.features[j].properties.value = dataValue;

          // Stop looking through the JSON
          break;
        }
      }
    }

    // Bind the data to the SVG and create one path per GeoJSON feature

    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("stroke", "#fff")
      .style("stroke-width", "1")
      .style("fill", function(d) { return ramp(d.properties.value) });

      g.selectAll("text")
        .data(json.features)
        .enter()
        .append("svg:text")
        .text(function(d){
        return d.properties.name;
        })
        .attr("x", function(d){
        return path.centroid(d)[0];
        })
        .attr("y", function(d){
        return  path.centroid(d)[1];
        })
        .attr("text-anchor","middle")
        .attr('font-size','6pt');

        // add a legend
        var w = 140, h = 300;

        var key = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
            .attr("class", "legend");

        var legend = key.append("defs")
            .append("svg:linearGradient")
            .attr("id", "gradient")
            .attr("x1", "100%")
            .attr("y1", "0%")
            .attr("x2", "100%")
            .attr("y2", "100%")
            .attr("spreadMethod", "pad");

        legend.append("stop")
            .attr("offset", "0%")
            .attr("stop-color", highColor)
            .attr("stop-opacity", 1);

        legend.append("stop")
            .attr("offset", "100%")
            .attr("stop-color", lowColor)
            .attr("stop-opacity", 1);

        key.append("rect")
            .attr("width", w - 100)
            .attr("height", h)
            .style("fill", "url(#gradient)")
            .attr("transform", "translate(0,10)");

        var y = d3.scaleLinear()
            .range([h, 0])
            .domain([minVal, maxVal]);

        var yAxis = d3.axisRight(y);

        key.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(41,10)")
            .call(yAxis)
  });

});
</script>
</body>
</html>

谢谢你。

标签： d3.js

解决方案

推荐阅读