D3 choropleth 状态图数据更新按钮单击

Posted 2023-02-22

技术标签:

【中文标题】D3 choropleth 状态图数据更新按钮单击【英文标题】：D3 choropleth state map data update on button click 【发布时间】：2016-05-31 04:35:14 【问题描述】：

我使用 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>
          #mapheight: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>

【问题讨论】：

【参考方案1】：

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

我查看了他们的 choropleth 和 state label 示例，以了解如何执行此操作。定义 onclick 属性的方式没问题。你只需要渲染一次地图。要更新它，您可以使用他们的 .updateChoropleth() 方法，如 choropleth 示例中所示。此外，您似乎不需要 jQuery。出于某种原因，我过去在尝试同时使用 jQuery 和 d3 时遇到了一些问题。在大多数情况下，您可以使用 d3 完成所需的工作。这是关于 SO 的另一个问题的链接：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 choropleth 状态图数据更新按钮单击的主要内容，如果未能解决你的问题，请参考以下文章

堆栈区域图上的 D3 exit().remove()

更改d3条形图的“填充”

D3更新条形图VUE.js

单击表格单元格内的按钮时无法更新状态，React Ant Design

删除 ggplot 地图/choropleth 中的边界线

choropleth地图数据未加载到由bing提供的excel地图中的状态IN和MN