Question

我一直在使用d3.queue()引入多个文件。 JSON是地图，CSV是与JSON文件中的IDs相关联的度量标准。我已成功加载CSV并可以使用d3.map()打印列表。

从这里我不确定当一个县徘徊时如何返回actual_margin。目标是每当一个县徘徊在工具提示中显示actual_margin时。以下是完整代码，.html()只是打印hi作为占位符。

<!DOCTYPE html>
<style>

    .counties {
        fill: white;
        stroke: #7887AB;
        stroke-width: .5px;
    }

    .counties .hovered,
    .counties :hover {
        fill: #061539;
        stroke-width: .5px;
    }

    .county-borders {
        fill: none;
        stroke: #F0F8FF;
        stroke-width: .2px;
        stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;
    }

    .state-borders {
        fill: none;
        stroke: #162955;
        opacity: .8;
        stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;
    }

    .toolTip {
        position: absolute;
        display: none;
        min-width: 80px;
        height: auto;
        background: none repeat scroll 0 0 #ffffff;
        border: 1px solid #6F257F;
        padding: 14px;
        text-align: center;
    }
</style>

<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
    var svg = d3.select("svg");
    var path = d3.geoPath();
    var tooltip = d3.select("body").append("div").attr("class", "toolTip");
    var metrics = d3.map();

    d3.queue()
        .defer(d3.json, "https://d3js.org/us-10m.v1.json")
        .defer(d3.csv, "https://raw.githubusercontent.com/MatthewSnellOKC/mapping/master/merge/countymetrics_json.csv", function(d) {metrics.set(d.county_fips, +d.actual_margin);})
        .await(ready);

    function ready(error, us) {
        if (error) throw error;

        svg.append("g")
            .attr("class", "counties")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.counties).features)
            .enter()
            .append("path")
            .attr("d", path);

        svg.append("g")
            .attr("class", "state-borders")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.nation).features)
            .enter()
            .append("path")
            .attr("d", path);
        svg.append("path")
            .attr("class", "state-borders")
            .attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) {
                return a !== b;
            })));
        svg.append("path")
            .attr("class", "state-borders")
            .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
                return a !== b;
            })));
        svg.append("path")
            .attr("class", "county-borders")
            .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) {
                return a !== b;
            })));


        svg.selectAll('.counties path')
            .on('mouseover', function() {

                tooltip
                    .style("left", 500 + "px")
                    .style("top", 70 + "px")
                    .style("display", "inline-block")
                    .html("hi"); //Goal is to return the associated actual_margin to the ID of each county.
            })
            .on('mouseout', function(d) {
                tooltip.style("display", "none");
            });
    }
</script>

Answer 1

由于您使用的是set ...

metrics.set(d.county_fips, +d.actual_margin);

...您必须使用get

检索值

.html("The value is " + metrics.get(d.id));

另请注意，您必须将基准d传递给mouseover事件：

.on('mouseover', function(d) { 
//datum here -------------^

以下是包含这些更改的代码：

<style>
  .counties {
    fill: white;
    stroke: #7887AB;
    stroke-width: .5px;
  }
  
  .county-borders {
    fill: none;
    stroke: #F0F8FF;
    stroke-width: .2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
  
  .state-borders {
    fill: none;
    stroke: #162955;
    opacity: .8;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
  
  .toolTip {
    position: absolute;
    min-width: 80px;
    height: auto;
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #6F257F;
    padding: 14px;
    text-align: center;
  }

</style>

<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
  var svg = d3.select("svg");
  var path = d3.geoPath();
  var tooltip = d3.select("body").append("div").attr("class", "toolTip");
  var metrics = d3.map();

  d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.csv, "https://raw.githubusercontent.com/MatthewSnellOKC/mapping/master/merge/countymetrics_json.csv", function(d) {
      metrics.set(d.county_fips, +d.actual_margin);
    })
    .await(ready);

  function ready(error, us) {
    if (error) throw error;

    svg.append("g")
      .attr("class", "counties")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
      .enter()
      .append("path")
      .attr("d", path);

    svg.append("g")
      .attr("class", "state-borders")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.nation).features)
      .enter()
      .append("path")
      .attr("d", path);
    svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) {
        return a !== b;
      })));
    svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
        return a !== b;
      })));
    svg.append("path")
      .attr("class", "county-borders")
      .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) {
        return a !== b;
      })));


    svg.selectAll('path')
      .on('mouseover', function(d) {
        tooltip
          .style("left", d3.event.pageX + 20 + "px")
          .style("top", d3.event.pageY + "px")
          .style("display", "inline-block")
          .html("The value is " + metrics.get(d.id)); 
      })
      .on('mouseout', function(d) {
        tooltip.style("display", "none");
      });
  }

</script>

在县悬停时，在工具提示中显示CSV中的关联指标

1 个答案: