Fatal编程技术网
  • javascript/
  • Javascript D3 choropleth州地图数据更新按钮点击

Javascript D3 choropleth州地图数据更新按钮点击

javascript d3.js

Javascript D3 choropleth州地图数据更新按钮点击,javascript,d3.js,topojson,Javascript,D3.js,Topojson,我已经使用d3、datamaps和topojson创建了一个choropleth状态映射。我在基于按钮单击更改原始地图的数据时遇到问题。首选的方法是在change函数中刷新原始地图的数据。相反，我让按钮执行函数消除包含映射的div，然后重新创建div，然后完全生成一个新映射（请参阅下面的代码）。这是可行的，但我认为有一种更简单、更复杂的方法来刷新数据。任何帮助都将不胜感激 <!DOCTYPE HTML> <html> <head> <scri

我已经使用d3、datamaps和topojson创建了一个choropleth状态映射。我在基于按钮单击更改原始地图的数据时遇到问题。首选的方法是在change函数中刷新原始地图的数据。相反，我让按钮执行函数消除包含映射的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>


#地图{高度：400px；宽度：600px；边框样式：实心；边框颜色：白色；}
#浮动面板1{
位置：绝对位置；
顶部：10px；
左：1%；
z指数：5；
/*背景色：#fff*/
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：1px；
}
var成本变化={
'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%}；
//使用成本数据初始化映射
var映射；
$（文档）.ready（函数（）{
map=新数据映射({
经营范围：美国，
元素：document.getElementById（'map'），
地理图形配置：{
highlightBorderColor:“#bada55”，
popupTemplate：函数（地理、数据）{
返回“+geography.properties.name+”%：“+data.Percentage+”
},
highlightBorderWidth:3
},
填充：{
“光”：“ffad99”，
“中等”：“ff704d”，
“重”：“ff3300”，
defaultFill:“#ffebe6”
},
数据：成本变化
});
map.labels（）；
});
//单击按钮可删除地图并使用成本数据重新创建
函数cstchng（）{
$（“#映射”）.remove（）；
$（“#标题”）。在（“”）之后；
map=新数据映射({
经营范围：美国，
元素：document.getElementById（'map'），
地理图形配置：{
highlightBorderColor:“#bada55”，
popupTemplate：函数（地理、数据）{
返回“+geography.properties.name+”%：“+data.Percentage+”
},
highlightBorderWidth:3
},
填充：{
“光”：“ffad99”，
“中等”：“ff704d”，
“重”：“ff3300”，
defaultFill:“#ffebe6”
},
数据：成本变化
});
map.labels（）；
}
//单击按钮可删除地图并使用速率数据重新创建
函数rtchng（）{
$（“#映射”）.remove（）；
$（“#标题”）。在（“”）之后；
map=新数据映射({
经营范围：美国，
元素：document.getElementById（'map'），
地理图形配置：{
highlightBorderColor:“#bada55”，
popupTemplate：函数（地理、数据）{
返回“+geography.properties.name+”%：“+data.Percentage+”
},
highlightBorderWidth:3
},
填充：{
“光”：“ffad99”，
“中等”：“ff704d”，
“重”：“ff3300”，
defaultFill:“#ffebe6”
},
数据：税率变化
});
map.labels（）；
}
成本变动
射程变化
我想我能帮上忙。在这种情况下，当您有一些冗余代码时，通常会有一种更简单的方法来完成任务。如果您查看datamaps中的示例和示例，您可以逐一查看它们，以更好地了解地图构建过程的工作原理，这将有助于任何未来的项目

我查看了他们的choropleth和state label示例，以了解如何做到这一点。定义
onclick
属性的方式是正确的。不过，只需渲染贴图一次。要更新它，您可以使用他们的
.updateChoropleth（）
方法，如choropleth示例所示。而且，您似乎不需要jQuery。出于某种原因，我在过去尝试同时使用jQuery和d3时遇到了一些问题。在大多数情况下，你可以用d3完成你所需要的。这里有一个链接指向另一个关于该问题的问题：

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

及 
<!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>