キャッチされない例外TypeErrorを取得：leafletjs

に未定義のプロパティ「長さ」を読み取ることができません私はleafletjsを使用した世界地図を作成し、私がしようとしたときに半径&色はしかしキャッチされない例外TypeErrorを取得：leafletjs

と同様に一定のルックスですときhttps://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json私の出力からのデータを表示しますキャッチされない例外TypeErrorを言う半径と色の取得エラーのスケールを追加します。未定義

は私が考えるのプロパティ「長さ」を読み込めません。そのため、私はそれを実装しかし、わからない正しい方法は何ですかウェイの私コードは

です

// load and display the World 
 
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", function (error, data) { 
 
    var color = d3.scale.category20c(); 
 
    var map = L.map('map', { 
 
     center: [20.0, 5.0], 
 
     minZoom: 2, 
 
     zoom: 2 
 
    }); 
 
    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', { 
 
     attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">', 
 
     subdomains: ['otile1', 'otile2', 'otile3', 'otile4'] 
 
    }).addTo(map); 
 
    data.features.forEach(function (data2) { 
 
     var radiusScale = d3.scale.linear() 
 
\t \t \t \t \t .domain(d3.extent(data2.features, function (d) { 
 
\t \t \t \t \t  return +d.properties.mass; 
 
\t \t \t \t \t })) 
 
\t \t \t \t \t .range([2, 100]); 
 
     var coordinates = ([+data2.properties.reclat, +data2.properties.reclong]); 
 
     console.log(coordinates); 
 
     var circle = L.circle([coordinates[0], coordinates[1]], radiusScale(+d.properties.mass), { 
 
      color: function (d, i) { 
 
       return color(i); 
 
      }, 
 
      fillColor: '#f03', 
 
      fillOpacity: 0.5 
 
     }).addTo(map); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Forced Layout</title> 
 
    <meta charset="utf-8" /> 
 
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" /> 
 
    <link href="../Content/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="../Scripts/d3/d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> 
 
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script> 
 
    <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script> 
 
    <link href="demo.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 
    <!-- 
 
     <div class="mainContainer text-center"> 
 
     <div id="chart"></div> 
 
    </div> 
 
     --> 
 

 
    <div id="map"></div> 
 
    <script src="../Scripts/jquery-2.2.1.min.js"></script> 
 
    <script src="../Scripts/bootstrap.min.js"></script> 
 
    <script src="demo.js"></script> 
 
</body> 
 
</html>

Fiddle Link

出典

2016-04-09 user5323957

規模計算：

var radiusScale = d3.scale.linear() 
    .domain(d3.extent(data.features, function(d) { 
     return +d.properties.mass; 
    })) 
    .range([2, 100]);

はリニアスケールコードはは、それがために、ループの前にあるべきであるforループの内側であってはなりません。コードhere

出典

2016-04-09 04:49:51 Cyril

働いていた作業

はあなたに感謝が、それは半径は '半径に大きな範囲を与えるhttp://i.stack.imgur.com/2lDHn.png – user5323957

のように応じて期待何かを往復運動されていないに見えます.range （[5000、500000]）; 'fiddle https://jsfiddle.net/jf2c37zx/スクリーンショットはこちらhttp://www.clipular.com/c/6552267715510272.png?k=2A39IVm3-40QFFQfSfFoU83Li38 – Cyril

キャッチされない例外TypeErrorを取得：leafletjs

答えて

関連する問題