Question

我创建了世界地图使用leafletjs并显示数据来自https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json我的输出当Radius＆amp;颜色不变看起来像

然而，当我尝试为Radius和Color添加比例时获取错误，表示未捕获TypeError：无法读取未定义的属性“length”

我认为它是因为我实施它的方式但不确定我的代码是什么正确的方式

// 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()
					.domain(d3.extent(data2.features, function (d) {
					    return +d.properties.mass;
					}))
					.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

Answer 1

比例计算：

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

线性比例代码应该不在for循环之前应该在for循环之前。

工作代码here

获取未捕获的TypeError：无法读取leafletjs上未定义的属性“length”

1 个答案: