单击按钮时 D3 等值线状态地图数据更新

Question

我已经使用 d3、datamaps 和 topojson 创建了等值线状态图。我在通过单击按钮更改原始地图数据时遇到问题。首选方法是仅在更改函数内刷新原始地图的数据。相反，我让按钮执行函数消除包含地图的 div，然后重新创建 div，然后完全生成一个新地图（参见下面我的代码）。这行得通，但我认为有一种更简单、更复杂的刷新数据的方法。任何帮助将不胜感激。

<!DOCTYPE HTML>
<html>
<head>
      <script src='js/d3.min.js'></script>
      <script src='http://d3js.org/topojson.v1.min.js'></script>
      <script src='js/datamaps.all.min.js'></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <style>
          #map{height:400px; width: 600px; border-style: solid; border-color:white;} 

                 #floating-panel1 {
              position: absolute;
              top: 10px;
              left: 1%;
              z-index: 5;
              /*background-color: #fff;*/
              padding: 5px;
              border: 1px solid #999;
              text-align: center;
              font-family: 'Roboto','sans-serif';
              line-height: 30px;
              padding-left: 1px;
            }
    </style>

    <script>

        var costChange = {
        'AR':{'fillKey':'heavy','Percentage':'236%'},
        'IL':{'fillKey':'light','Percentage':'5%'},
        'IN':{'fillKey':'medium','Percentage':'20%'},
        'KS':{'fillKey':'heavy','Percentage':'76%'},
        'KY':{'fillKey':'heavy','Percentage':'289%'},
        'MS':{'fillKey':'heavy','Percentage':'110%'},
        'NC':{'fillKey':'heavy','Percentage':'261%'},
        'TN':{'fillKey':'heavy','Percentage':'57%'},
        'VA':{'fillKey':'heavy','Percentage':'57%'},
        'WA':{'fillKey':'medium','Percentage':'18%'},
        'WI':{'fillKey':'medium','Percentage':'18%'}

    };

    var rateChange = {'AL':{'fillKey':'medium','Percentage':'10%'},
        'AR':{'fillKey':'medium','Percentage':'16%'},
        'AZ':{'fillKey':'light','Percentage':'7%'},
        'CO':{'fillKey':'heavy','Percentage':'44%'},
        'CT':{'fillKey':'heavy','Percentage':'132%'},
        'DE':{'fillKey':'light','Percentage':'6%'},
        'FL':{'fillKey':'heavy','Percentage':'62%'},
        'GA':{'fillKey':'medium','Percentage':'17%'},
        'ID':{'fillKey':'heavy','Percentage':'66%'},
        'IN':{'fillKey':'light','Percentage':'4%'},
        'KS':{'fillKey':'medium','Percentage':'11%'},
        'KY':{'fillKey':'medium','Percentage':'24%'},
        'LA':{'fillKey':'medium','Percentage':'25%'},
        'MA':{'fillKey':'heavy','Percentage':'55%'},
        'MD':{'fillKey':'heavy','Percentage':'28%'}};



//initialize map with cost data
var map;
   $(document).ready(function(){
         map = new Datamap({
        scope: 'usa',
        element: document.getElementById('map'),
        geographyConfig: {
            highlightBorderColor: '#bada55',
            popupTemplate: function(geography, data) {
                return "<div class='hoverinfo'>" + geography.properties.name + ' %:' +  data.Percentage + ' '
            },
            highlightBorderWidth: 3
        },
        fills: {
            'light': '#ffad99',
            'medium': '#ff704d',
            'heavy': '#ff3300',
            defaultFill: '#ffebe6'
        },
        data:costChange

    });
        map.labels();

});


//button click removes map and recreated with cost data
    function cstchng(){
        $("#map").remove();
        $("#title").after("<div id='map'></div>");
         map = new Datamap({
            scope: 'usa',
            element: document.getElementById('map'),
            geographyConfig: {
                highlightBorderColor: '#bada55',
                popupTemplate: function(geography, data) {
                    return "<div class='hoverinfo'>" + geography.properties.name + ' %:' +  data.Percentage + ' '
                },
                highlightBorderWidth: 3
            },
            fills: {
                'light': '#ffad99',
                'medium': '#ff704d',
                'heavy': '#ff3300',
                defaultFill: '#ffebe6'
            },
            data:costChange

        });
        map.labels();
    }

//button click removes map and recreated with rate data
   function rtchng(){
         $("#map").remove();
        $("#title").after("<div id='map'></div>");
         map = new Datamap({
            scope: 'usa',
            element: document.getElementById('map'),
            geographyConfig: {
                highlightBorderColor: '#bada55',
                popupTemplate: function(geography, data) {
                    return "<div class='hoverinfo'>" + geography.properties.name + ' %:' +  data.Percentage + ' '
                },
                highlightBorderWidth: 3
            },
            fills: {
                'light': '#ffad99',
                'medium': '#ff704d',
                'heavy': '#ff3300',
                defaultFill: '#ffebe6'
            },
            data:rateChange

        });
       map.labels();
    }

        </script>
</head>

<body>
     <div id="floating-panel1">
    <button type="button" onclick = "cstchng()">Cost Change</button>
    <button type="button" onclick = "rtchng()">Range Change</button>
     </div>
    <div id="title"></div>
    <div id="map"></div>

</body>
</html>

Answer 1

我想我也许能帮上忙。在这种情况下，当您有一些冗余代码时，通常会有一种更简单的方法来完成任务。如果您查看数据地图中的 documentation 和示例，您可以一个一个地浏览它们，以更好地了解地图构建过程的工作原理，它应该对任何未来的项目都有帮助。

我查看了他们的等值线和州标签示例，以了解如何执行此操作。您定义 onclick 属性的方式是可以的。不过，您只需要渲染一次地图。要更新它，您可以使用他们的 .updateChoropleth() 方法，如 choropleth 示例中所示。另外，您似乎不需要 jQuery。出于某种原因，我过去在尝试同时使用 jQuery 和 d3 时遇到过一些问题。在大多数情况下，您可以使用 d3 完成所需的工作。这是关于 SO 的另一个问题的 link：What is the difference between D3 and jQuery?

我创建了一个 plunker，这样你就可以看到我所做的输出。让我知道这是否是您想要做的：

http://plnkr.co/edit/Uaau983AQUbMoknZoROf?p=preview

这是我用作参考的代码：

<!DOCTYPE HTML>
<html>
<head>
      <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
      <script src='datamaps.all.min.js'></script>
</head>

<body>
<button id="costChange" onclick='updateCost(costChange)'>Cost Change</button>
<button id="rateChange" onclick='updateCost(rateChange)'>Range Change</button>
<div id="container" style="position: relative; width: 500px; height: 300px;">
</div>
<script>

var election = new Datamap({

  scope: 'usa',

  element: document.getElementById('container'),

  geographyConfig: {
    highlightBorderColor: '#bada55',
   popupTemplate: function(geography, data) {
      return '<div class="hoverinfo">' + geography.properties.name + 'Percentage:' +  data.electoralVotes + ' '
    },
    highlightBorderWidth: 3
  },

  fills: {
  'light': '#ffad99',
            'medium': '#ff704d',
            'heavy': '#ff3300',
            defaultFill: '#ffebe6'
  },

  data:{}

  });

  election.labels();


   var costChange = {
        'AR':{'fillKey':'heavy','Percentage':'236%'},
        'IL':{'fillKey':'light','Percentage':'5%'},
        'IN':{'fillKey':'medium','Percentage':'20%'},
        'KS':{'fillKey':'heavy','Percentage':'76%'},
        'KY':{'fillKey':'heavy','Percentage':'289%'},
        'MS':{'fillKey':'heavy','Percentage':'110%'},
        'NC':{'fillKey':'heavy','Percentage':'261%'},
        'TN':{'fillKey':'heavy','Percentage':'57%'},
        'VA':{'fillKey':'heavy','Percentage':'57%'},
        'WA':{'fillKey':'medium','Percentage':'18%'},
        'WI':{'fillKey':'medium','Percentage':'18%'}
    };

    var rateChange = {'AL':{'fillKey':'medium','Percentage':'10%'},
        'AR':{'fillKey':'medium','Percentage':'16%'},
        'AZ':{'fillKey':'light','Percentage':'7%'},
        'CO':{'fillKey':'heavy','Percentage':'44%'},
        'CT':{'fillKey':'heavy','Percentage':'132%'},
        'DE':{'fillKey':'light','Percentage':'6%'},
        'FL':{'fillKey':'heavy','Percentage':'62%'},
        'GA':{'fillKey':'medium','Percentage':'17%'},
        'ID':{'fillKey':'heavy','Percentage':'66%'},
        'IN':{'fillKey':'light','Percentage':'4%'},
        'KS':{'fillKey':'medium','Percentage':'11%'},
        'KY':{'fillKey':'medium','Percentage':'24%'},
        'LA':{'fillKey':'medium','Percentage':'25%'},
        'MA':{'fillKey':'heavy','Percentage':'55%'},
        'MD':{'fillKey':'heavy','Percentage':'28%'}
      };

  function updateCost(arg) {
    election.updateChoropleth(null, {reset: true});
    election.updateChoropleth(arg);
  }

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

希望这对您有所帮助，如果您有任何问题，请告诉我:)

单击按钮时 D3 等值线状态地图数据更新

D3 choropleth state map data update on button click

javascript

d3.js

topojson