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()方法，如等值范例中所示。此外，它似乎不需要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等值线状态图数据更新

1 个答案: