logo标签列表

点击按钮更新的D3州区域地图数据。

javascriptd3.jstopojson
3
我使用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>
1个回答
1
我认为我可以提供帮助。在这种情况下，当您有一些冗余代码时，通常会有更简单的方法来完成任务，正如您所提到的。如果您查看datamaps的文档和示例，您可以逐个浏览它们，以更好地了解地图构建过程的工作原理，这应该有助于任何未来的项目。
我查看了他们的choropleth和state标签示例以找出如何做到这一点。您定义onclick属性的方式是正确的。但是，您只需要渲染一次地图。要更新它，您可以使用他们的.updateChoropleth()方法，就像在choropleth示例中所看到的那样。此外，似乎您不需要jQuery。由于某种原因，我过去尝试将jQuery和d3一起使用时遇到了一些问题。在大多数情况下，您可以使用d3来完成所需的操作。这是关于这个问题的另一个SO链接：D3和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>

希望这有所帮助，如果您有任何问题，请告诉我 :)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接