个人中心
gpt4 book ai didi

javascript - 用 D3 和 d3.slider 显示 SVG 元素 : Uncaught TypeError: . exit 不是函数

转载 作者：行者123 更新时间：2023-11-28 01:19:08 26 4
gpt4 key购买 nike

我正在使用这个 example在 D3.js 中作为我的起点，我想做与本例相同的事情。在 stackoverflow 的帮助下，我已经可以学到很多关于 D3 的知识，但现在我遇到了一个我不明白的问题。我的代码在这个 repo 上因为我还不知道(？)如何在不浪费太多空间的情况下与您共享我的文件。来回移动 slider 时出现错误。向右移动会产生点，但当 slider 向左移动时它们不会消失，就像他们在示例中所做的那样。此外，我不确定如果我到达时间线的末尾，它们是否总是产生相同数量的点数。此图显示，当我单击立即结束时 Error1当我单击/滑动到时间线的末尾时，此屏幕截图显示。据我所知，它应该总是产生相同数量的 enter image description here 

<!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 {
  opacity: 0.2;
  fill: #9cf;
}

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

svg {
  background: #eee;
}

.sphere {
  fill: rgb(92, 136, 255)
}

.land {
  fill: rgb(255, 239, 204)
}

.incident{
  fill:#07f5e7;
  opacity: 0.3;
}

.boundary {
  fill: none;
  stroke: rgb(224, 91, 49);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.state {
  fill: #000;
}
.city{
  fill: #de1ae8;
}

.overlay {
  fill: none;
  pointer-events: all;
}
</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);

var zoom = d3.behavior.zoom()
    .scaleExtent([3, 77])
    .on("zoom", zoomed);

var path = d3.geo.path()
    .projection(projection);

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

var g = svg.append("g");
var sites = svg.append("g");

svg.call(zoom)
    .call(zoom.event);

d3.json("countries.topo.json", function(error, world) {
	if (error) throw error;

  g.append("path")
      .datum({type: "Sphere"})
      .attr("class", "sphere")
      .attr("d", path);

  g.append("path")
      .datum(topojson.merge(world, world.objects.countries.geometries))
      .attr("class", "land")
      .attr("d", path);

  g.append("path")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);

//_______________________________________________________________________________________________________________________________________
//________________________________________________________________________________________________________________________________________


  d3.json("germany.topo.json", function(error, ger){
    if (error) throw error;
    var states = topojson.feature(ger, ger.objects.states),
        cities = topojson.feature(ger, ger.objects.cities );

    g.selectAll(".states")
        .data(states.features)
        .enter()
        .append("path")
        .attr("class", "state")
        .attr("class", function(d) { return "state " + d.id; })
        .attr("d", path);
    g.append("path")
        .datum(cities)
        .attr("d", path.pointRadius('0.05'))
        .attr("class", "city");
  });
});

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

d3.select(self.frameElement).style("height", height + "px");

d3.json("https://raw.githubusercontent.com/RitterLean/Slider-geojson-testing/master/vorfaelle.json", function(error, data){
    console.log(data.features[1].geometry.coordinates, "sad");
    window.site_data = data;

});


var displaySites = function(data) {
  //console.log(data)
  sites.selectAll(".site")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "site")
      .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]
      })
      .attr("r", 0)
      .transition().duration(400)
      .attr("r", 0.23);
    //  "".attr""

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


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)
  .on("slide", function(evt, value) {

    newData = site_data.features.filter(function(d){
      return dateParser(d.properties.date) < new Date(value);
    });
		console.log("New set size ", newData.length);
    displaySites(newData);
  })
);

</script>
</body>

为什么 slider 不能正常工作？

最佳答案

slider 的问题是:

你在这样的选择上调用退出函数:

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

但本来应该是这样的:

  sites.selectAll(".site")
      .data(data).exit()//remove the selection which are to be removed from dataset
    .transition().duration(200)
      .attr("r",0)
      .remove();

工作代码 here

希望这对您有所帮助!

关于javascript - 用 D3 和 d3.slider 显示 SVG 元素 : Uncaught TypeError: . exit 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34482268/

26 4 0
文章推荐： C++:返回类型为 T 且不采用 T 类型参数的模板函数将无法编译
文章推荐： javascript - 关于带有索引的 jQuery 回调函数的 w3schools 示例
文章推荐： c++ - 当我更改其他 Mat 对象时，Mat 值会更改
文章推荐： html - 具有最大宽度的内联 block 不会有省略号
行者123
个人简介

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

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