Question

我有这张美国地图。我知道如何绑定其他数据，改变状态的颜色，但我唯一不知道如何在状态悬停时更改默认的橙色颜色。

你也可以在这里找到它：http://blockbuilder.org/malcolm-decuire/34d2ce39d3b8c2f8a577

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>

  <script src="http://datamaps.github.io/scripts/datamaps.all.min.js?v=1"></script>
  <h2> American Lynches | 1830-1970</h2>

  <div id="map" style="position: relative; width: 900px; max-height: 900px;"></div>


     <script>

      var map = new Datamap({
        scope: 'usa',
        element: document.getElementById('map'),
        geographyConfig:{
          highlightBorderColor: '#bada55',
          popupTemplate: function(geography, data){
            return '<div class="hoverinfo">' + geography.properties.name + ' White/Black ' +  data.LynchWhite + ' / ' + data.LynchBlack
          },
        },

        height: 500,
        fills: {
          'none': '#999999',
          'White': '#CC4731',
          'Black': '#306596',
        },

        data: {
            "AZ": {
              "fillKey": "White",
              "LynchWhite": 31,
              "LynchBlack": 0
            },

          ...

        }
      })




       //keep this code
     map.bubbles([ ], {
       popupTemplate: function(geography, data) {
         return "<div class='hoverinfo'>It is " + data.name + "</div>";
       }
     });

     </script>

       <script> 
        var ordinal = d3.scale.ordinal()
       .domain(["white", "black", "none"])
       .range([ "rgb(204,71,49)", "rgb(48,101,150)", "rgb(153,153,153"]);

       var svg = d3.select("svg");

       svg.append("g")
       .attr("class", "legendOrdinal")
       .attr("transform", "translate(450,450)");

       var legendOrdinal = d3.legend.color()
       .shape("path", d3.svg.symbol().type("triangle-up").size(150)())
       .shapePadding(10)
       .scale(ordinal);

       svg.select(".legendOrdinal")
       .call(legendOrdinal);

       </script>  
</body>

Answer 1

根据documentation，它由highlightFillColor配置选项控制：

geographyConfig:{
  highlightFillColor: '#FC8D59'
}

在

1 个答案: