个人中心
gpt4 book ai didi

javascript - 使用 D3 和 d3.slider 显示 SVG 元素 : Uncaught TypeError: Cannot read property 'length' of undefined

转载 作者：行者123 更新时间：2023-11-30 00:16:36 24 4
gpt4 key购买 nike

我正在尝试使用 slider (每天)根据地理位置显示一些圈子。数据保存在 vorfaelle.json 文件中，即 here HTML/d3 文件如下所示。 

<!DOCTYPE html>
<head>
    <title>D3 Mapping Timeline</title>
<meta charset="utf-8">
<link rel="stylesheet" href="d3.slider.css" />
<style>

path {
  fill: none;
  stroke: #333;
  stroke-width: .5px;
}

.land-boundary {
  stroke-width: 1px;
}

.county-boundary {
  stroke: #ddd;
}

.site {
    stroke-width: .5px;
  stroke: #333;
  fill: #9cf;
}

#slider3 {
  margin: 20px 0 10px 20px;
  width: 900px;
}

</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="d3.slider.js"></script>
</head>


<body>

<div id="slider3"></div>



<script>
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var width = 1240,
    height = 720;
var projection = d3.geo.mercator()
    .translate([width / 2, height / 2])
    .scale((width - 1) / 2 / Math.PI);


d3.json("vorfaelle.json", function(error, data){
    console.log(data.features[1].geometry.coordinates);
    window.site_data = data;

});


var displaySites = function(data) {
  var sites = svg.selectAll(".site")
            .data(data);
  sites.enter().append("circle")
      .attr("class", "site")
      .attr("cx", function(d) {
                for (var i = 0; i < d.features.length+1; i++) {
                    console.log(d.features[i].geometry.coordinates[0]);
                    return projection(d.features[i].geometry.coordinates[0])
                    //return projection([d.lng, d.lat])[0];
                }
      })
      .attr("cy", function(d) {
                for (var i = 0; i < d.features.length+1; i++) {
                    console.log(d.features[i].geometry.coordinates[1]);
                    return projection([d.features[i].geometry.coordinates[1]])
                    //return projection([d.lng, d.lat])[0];
                }
      })
      .attr("r", 1)
      .transition().duration(400)
        .attr("r", 5);

  sites.exit()
    .transition().duration(200)
      .attr("r",1)
      .remove();
};

// var minDateUnix = moment('2014-07-01', "YYYY MM DD").unix();
// var maxDateUnix = moment('2015-07-21', "YYYY MM DD").unix();
var dateParser = d3.time.format("%d.%m.%Y").parse;
var minDate = dateParser("01.01.2015");
var maxDate = dateParser("31.12.2015");
console.log(minDate);
var secondsInDay = 60 * 60 * 24;

d3.select('#slider3').call(d3.slider()
  .axis(true).min(minDate).max(maxDate).step(1)
  .on("slide", function(evt, value) {
    var newData = _(site_data).filter( function(site) {
            for (var i = 0; i < site.features.length+1; i++) {
                var date = dateParser(site.features[2].properties.date)
                return date < value;
            }

    })
    console.log("New set size ", newData.length);

    displaySites(newData);
  })
);

</script>
</body>

我不确定最后是否正确过滤了数据，因为我正在试验这个 example和我的数据。当我移动 slider 时出现此错误: Error length

最佳答案

对于过滤，你这样做是错误的过滤器用法，因为过滤器对数组进行操作。

var newData = _(site_data).filter( function(site) {
            for (var i = 0; i < site.features.length+1; i++) {
                var date = dateParser(site.features[2].properties.date)
                return date < value;
            }

    })

您可以像下面这样进行过滤:

d3.select('#slider3').call(d3.slider()
  .axis(true).min(minDate).max(maxDate).step(1)
  .on("slide", function(evt, value) {

    newData = site_data.features.filter(function(d){
      //convert the value to date
      //convert the d.properties.date to date object using parser
      return dateParser(d.properties.date) < new Date(value);
    });
    displaySites(newData);
  })
);

再次在您的代码中，您执行了一个 for 循环来计算错误的圆的 cx:

.attr("cx", function(d) {
                for (var i = 0; i < d.features.length+1; i++) {
                    console.log(d.features[i].geometry.coordinates[0]);
                    return projection(d.features[i].geometry.coordinates[0])
                    //return projection([d.lng, d.lat])[0];
                }
      })

不需要 for 循环你应该这样做:

 .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);

        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);

        return p[1]
      })

工作代码 here

希望这对您有所帮助!

关于javascript - 使用 D3 和 d3.slider 显示 SVG 元素 : Uncaught TypeError: Cannot read property 'length' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34473666/

24 4 0
文章推荐： javascript - 无需页面刷新即可制作 Ajax 和 PHP 更新页面？
文章推荐： c# - 资源不包含 Id 的定义 - c# Xamarin Visual Studio
文章推荐： php - 将多个复选框值插入 mysql 字段但在每个复选框值之间添加空格？
文章推荐： android - 我应该如何为 exoplayer 创建一个包含视频和图像文件 URI 的 ConcatenatingMediaSource？
行者123
个人简介

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

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