个人中心
gpt4 book ai didi

javascript - 使用新 map 和数据重建 D3 动画分区统计图

转载 作者：行者123 更新时间：2023-11-28 04:43:55 25 4
gpt4 key购买 nike

我正在尝试重新创建 D3.js 示例:“又一个动画分区统计图”: http://bl.ocks.org/rgdonohue/9280446

只是，我尝试使用具有不同数据的不同 map 。我使用的 map 是美国各县的 map ，数据是各县 2 年的家庭值(value)中位数。我在显示 map 时遇到错误。错误:类型错误:counties[i].properties 未定义

出现在以下函数中(原始函数见上面的链接):

function processData(error, us, countyData) {
  var counties = us.objects.counties.geometries;  // store the path in variable for ease
  for (var i in counties) {    // for each geometry object
    for (var j in countyData) {  // for each row in the CSV
      if(counties[i].properties.id == countyData[j].id) {   // if they match
        for(var k in countyData[i]) {   // for each column in the a row within the CSV
          if(k != 'name' && k != 'id') {  // let's not add the name or id as props since we already have them
            if(attributeArray.indexOf(k) == -1) { 
               attributeArray.push(k);  // add new column headings to our array for later
            }
            counties[i].properties[k] = Number(countyData[j][k])  // add each CSV column key/value to geometry object
          } 
        }
        break;  // stop looking through the CSV since we made our match
      }
    }
  }
  d3.select('#clock').html(attributeArray[currentAttribute]);  // populate the clock initially with the current year
  drawMap(us);  // let's mug the map now with our newly populated data object
}

我相信正在发生的事情是“我们”由于某种原因未定义。原始示例使用 map world-topo.json，我无法找到其来源。我的 map 是http://d3js.org/us-10m.v1.json .

原始代码:

world.objects.countries.geometries

我改为:

us.objects.counties.geometries

在 Bostock 的原始 Choropleth 示例中，他使用了我正在使用的相同美国 map ，并将其引用为“我们”，但它似乎对我不起作用:

svg.append("g")
.data(topojson.feature(us, us.objects.counties).features)

我意识到我对 D3 没有很好的理解 - 我更像是一个代码黑客而不是开发人员。我只是想尝试一些可视化，并且对 javascript/d3 的经验很少。任何帮助，将不胜感激。

我的整个程序:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>d3 choropleth map</title>
    <style>
      #wrapper {
          width: 960px;
          margin: -30px auto 0;
      }
      #map {
          width: 960px;
          height: 580px;
          position: relative;
      }
      .stroke {
        fill: none;
        stroke: #888;
        stroke-width: 2px;
      }

      .fill {
        fill: #fff;
      }

      .graticule {
        fill: none;
        stroke: #777;
        stroke-width: .5px;
        stroke-opacity: .5;
      }

      .land {
        fill: #222;
      }

      .boundary {
        fill: none;
        stroke: #fff;
        stroke-width: .5px;
      }
      .county {
          fill: steelblue;
          stroke: white;
      }
      #play, #clock {
        position: absolute;
        top: 15px;
      }
      #play {
        left: 15px;
      }
      #clock {
        left: 65px;
      }
    </style>
</head>

<body>

    <div id="wrapper">  
        <div id="map"></div>
      <button id="play">play</button>
      <span id="clock">year</span>
    </div>


<script src="d3.v3.min.js"></script>
<script src="d3.geo.projection.v0.min.js"></script>
<script src="queue.v1.min.js"></script>
<script src="topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>   
<script src="https://d3js.org/topojson.v2.min.js"></script>

<script>
  //globals
var width, height, projection, path, graticule, svg, attributeArray = [], currentAttribute = 0, playing = false;

function init() {

  setMap();
  animateMap();

}

function setMap() {

  width = 960, height = 580;  // map width and height, matches 

  projection = d3.geo.eckert5()   // define our projection with parameters
    .scale(170)
    .translate([width / 2, height / 2])
    .precision(.1);

  path = d3.geo.path()  // create path generator function
      .projection(projection);  // add our define projection to it

  graticule = d3.geo.graticule(); // create a graticule

  svg = d3.select("#map").append("svg")   // append a svg to our html div to hold our map
      .attr("width", width)
      .attr("height", height);

  svg.append("defs").append("path")   // prepare some svg for outer container of svg elements
      .datum({type: "Sphere"})
      .attr("id", "sphere")
      .attr("d", path);

  svg.append("use")   // use that svg to style with css
      .attr("class", "stroke")
      .attr("xlink:href", "#sphere");

  svg.append("path")    // use path generator to draw a graticule
      .datum(graticule)
      .attr("class", "graticule")
      .attr("d", path);

  loadData();  // let's load our data next

}

function loadData() {

  queue()   // queue function loads all external data files asynchronously 
    .defer(d3.json, "us-10m.v1.json")  // our geometries
    .defer(d3.csv, "countiesRandom.csv")  // and associated data in csv file
    .await(processData);   // once all files are loaded, call the processData function passing
                           // the loaded objects as arguments
}

function processData(error, us, countyData) {
  var counties = us.objects.counties.geometries;  // store the path in variable for ease
  for (var i in counties) {    // for each geometry object
    for (var j in countyData) {  // for each row in the CSV
      if(counties[i].properties.id == countyData[j].id) {   // if they match
        for(var k in countyData[i]) {   // for each column in the a row within the CSV
          if(k != 'name' && k != 'id') {  // let's not add the name or id as props since we already have them
            if(attributeArray.indexOf(k) == -1) { 
               attributeArray.push(k);  // add new column headings to our array for later
            }
            counties[i].properties[k] = Number(countyData[j][k])  // add each CSV column key/value to geometry object
          } 
        }
        break;  // stop looking through the CSV since we made our match
      }
    }
  }
  d3.select('#clock').html(attributeArray[currentAttribute]);  // populate the clock initially with the current year
  drawMap(us);  // let's mug the map now with our newly populated data object
}

function drawMap(us) {

    svg.selectAll(".county")   // select country objects (which don't exist yet)
      .data(topojson.feature(us, us.objects.counties).features)  // bind data to these non-existent objects
      .enter().append("path") // prepare data to be appended to paths
      .attr("class", "county") // give them a class for styling and access later
      .attr("id", function(d) { return "code_" + d.properties.id; }, true)  // give each a unique id for access later
      .attr("d", path); // create them using the svg path generator defined above

    var dataRange = getDataRange(); // get the min/max values from the current year's range of data values
    d3.selectAll('.county')  // select all the countries
    .attr('fill-opacity', function(d) {
        return getColor(d.properties[attributeArray[currentAttribute]], dataRange);  // give them an opacity value based on their current value
    });
}

function sequenceMap() {

    var dataRange = getDataRange(); // get the min/max values from the current year's range of data values
    d3.selectAll('.county').transition()  //select all the countries and prepare for a transition to new values
      .duration(750)  // give it a smooth time period for the transition
      .attr('fill-opacity', function(d) {
        return getColor(d.properties[attributeArray[currentAttribute]], dataRange);  // the end color value
      })

}

function getColor(valueIn, valuesIn) {

  var color = d3.scale.linear() // create a linear scale
    .domain([valuesIn[0],valuesIn[1]])  // input uses min and max values
    .range([.3,1]);   // output for opacity between .3 and 1 %

  return color(valueIn);  // return that number to the caller
}

function getDataRange() {
  // function loops through all the data values from the current data attribute
  // and returns the min and max values

  var min = Infinity, max = -Infinity;  
  d3.selectAll('.county')
    .each(function(d,i) {
      var currentValue = d.properties[attributeArray[currentAttribute]];
      if(currentValue <= min && currentValue != -99 && currentValue != 'undefined') {
        min = currentValue;
      }
      if(currentValue >= max && currentValue != -99 && currentValue != 'undefined') {
        max = currentValue;
      }
  });
  return [min,max];  //boomsauce
}

function animateMap() {

  var timer;  // create timer object
  d3.select('#play')  
    .on('click', function() {  // when user clicks the play button
      if(playing == false) {  // if the map is currently playing
        timer = setInterval(function(){   // set a JS interval
          if(currentAttribute < attributeArray.length-1) {  
              currentAttribute +=1;  // increment the current attribute counter
          } else {
              currentAttribute = 0;  // or reset it to zero
          }
          sequenceMap();  // update the representation of the map 
          d3.select('#clock').html(attributeArray[currentAttribute]);  // update the clock
        }, 2000);

        d3.select(this).html('stop');  // change the button label to stop
        playing = true;   // change the status of the animation
      } else {    // else if is currently playing
        clearInterval(timer);   // stop the animation by clearing the interval
        d3.select(this).html('play');   // change the button label to play
        playing = false;   // change the status again
      }
  });
}


window.onload = init();  // magic starts here

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

来自 countiesRandom.csv 的示例数据:

id,2010,2015
01001,141300,133900

最佳答案

关于:

I am running into an error in displaying my map. The error: TypeError: counties[i].properties is undefined

我们需要检查引用的世界 topojson 和美国 topojson。

在 world topojson ，几何形状定义如下:

"geometries":[
{"type":"Polygon","id":1,"arcs":[[0,1,2,3,4,5,6,7]],"properties":{"admin":"Afghanistan","id":"AFG"}},
{"type":"Polygon","id":4,"arcs":[[16,17,18,19,20]],"properties":{"admin":"Albania","id":"ALB"}},

每个几何体都有一个属性。

在 US topojson您引用的几何图形定义如下:

"geometries":[
{"type":"Polygon","arcs":[[0,1,2,3,4]],"id":"05089"},
{"type":"Polygon","arcs":[[5,6,7,8,9]],"id":"06079"},
{"type":"Polygon","arcs":[[10,11,12,13,14,15,16]],"id":"17111"},

没有为每个几何图形分配属性属性。因此，当您调用几何图形的属性时，它将返回未定义。

因此，您可能会发现使用 counties[i].id 更成功，而不是使用 counties[i].properties.id。

<小时/>

如果您要比较示例，还可能值得注意的是，从 topojson 到 geojson 的转换 (topojson.feature(us, us.objects.counties).features) 将修改结构以及数据:

d3.json("//d3js.org/us-10m.v1.json",function(error,us) {
  console.log("Number of county geometries:");
  console.log(us.objects.counties.geometries.length);
  console.log("Example county id:");
  console.log(us.objects.counties.geometries[0].id);  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

d3.json("//d3js.org/us-10m.v1.json",function(error,us) {
  var geojson = topojson.feature(us, us.objects.counties).features;
  console.log("Number of features");
  console.log(geojson.length);
  console.log("Example county ID");
  console.log(geojson[0].id);
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

关于javascript - 使用新 map 和数据重建 D3 动画分区统计图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43548332/

25 4 0
文章推荐： c++ - 在 find_if 中使用仿函数
文章推荐： css - angular.less @import 有效，但在控制台中获取导入文件时出现 404
文章推荐： c++ - 比较 2 个不同大小的 vector C++
文章推荐： javascript - 在网页中设计日历时如何根据下一个数组输入更改存储在数组中的事件对象的属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com