Javascript 使用D3和D3显示SVG元素。滑块：未捕获类型错误：无法读取属性'；长度'；未定义的_Javascript_D3.js

Javascript 使用D3和D3显示SVG元素。滑块：未捕获类型错误：无法读取属性'；长度'；未定义的

javascript d3.js

Javascript 使用D3和D3显示SVG元素。滑块：未捕获类型错误：无法读取属性'；长度'；未定义的,javascript,d3.js,Javascript,D3.js,我试图显示一些圆的基础上，他们的地理位置与滑块（每天）。数据保存在vorfaelle.json文件中，该文件为HTML/d3文件，如下所示 <!DOCTYPE html> <head> <title>D3 Mapping Timeline</title> <meta charset="utf-8"> <link rel="stylesheet" href="d3.slider.css" /> <style>

我试图显示一些圆的基础上，他们的地理位置与滑块（每天）。数据保存在vorfaelle.json文件中，该文件为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>


D3映射时间线
路径{
填充：无；
冲程：#333；
笔划宽度：.5px；
}
1.土地界线{
笔画宽度：1px；
}
.县界{
行程：#ddd；
}
.地点{
笔划宽度：.5px；
冲程：#333；
填充：#9cf；
}
#滑块3{
利润率：20px 0 10px 20px；
宽度：900px；
}
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
可变宽度=1240，
高度=720；
var projection=d3.geo.mercator（）
.translate（[宽度/2，高度/2]）
.刻度（（宽度-1）/2/数学PI）；
d3.json（“vorfaelle.json”），函数（错误，数据）{
console.log（data.features[1].geometry.coordinates）；
window.site_data=数据；
});
var displaySites=功能（数据）{
var sites=svg.selectAll（“.site”）
.数据（数据）；
sites.enter（）.append（“圆圈”）
.attr（“类”、“站点”）
.attr（“cx”，功能（d）{
对于（变量i=0；i


我不确定我是否在最后正确过滤了数据，因为我正在试验这个和我的数据。移动滑块时，会出现以下错误：
对于筛选，您这样做是错误的，因为筛选器在阵列上运行
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);
  })
);

.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("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]
      })