使用 D3 和 d3.slider 显示 SVG 元素：未捕获的 ReferenceError：未定义 svg答案

【问题标题】：Displaying SVG elements with D3 and d3.slider: Uncaught ReferenceError: svg is not defined使用 D3 和 d3.slider 显示 SVG 元素：未捕获的 ReferenceError：未定义 svg
【发布时间】：2016-04-01 01:59:59
【问题描述】：

嘿，我目前正在尝试使用这个 D3 Example，我想实现我自己的滑块，它显示 json 文件的数据（我将所有内容都包含在 github repo 中，因为我不知道如何向您展示我的工作文件，而不是为它花费太多空间——尤其是 json 文件。对未来有什么建议吗？）。所以基本上我有我的bubble.html：

<!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 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) {
            console.log(site)
            // for (var i = 0; i < site.features.length; i++) {
            //  return site.features[i].properties.date < value;
            // }
    })
    console.log("New set size ", newData.length);
    displaySites(newData);
  })
);
</script>
</body>

从 json 中获取数据（在我的 repo vorfaelle.json 上）。现在，当我移动滑块手柄时，它“崩溃”并给我这个错误：究竟出了什么问题？是因为我没有正确读取数据吗？

【问题讨论】：

你必须在使用之前初始化svg。像这样在examples.htmlhere
谢谢。所以这是非常基本的东西

标签： javascript html json d3.js svg

【解决方案1】：

将svg 元素添加到dom 并将其分配给一个变量，以便您可以在代码中使用它。

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

【讨论】：