D3.js 时间轴根本不过滤地图上的兴趣点

Question

我结合了两种不同数据的可视化效果。第一个是显示过去 12 个月德国庇护数据的流图。第二个是地图上的产卵点。这个现在实际上是运行但现在它坏了，因为我将两者合并在一个 html 文件中。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/d3.slider.css" />
<link rel="stylesheet" href="css/temp.css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="library/d3.v3.min.js"></script>
<script type="text/javascript" src="library/topojson.v1.min.js"></script>
<script type="text/javascript" src="library/underscore-min.js"></script>
<script type="text/javascript" src="library/d3.slider.js"></script>
<script type="text/javascript" src="library/socket.io-0.9.10.min.js"></script>
<script type="text/javascript" src="library/caress-0.1.0.js"></script>
<script type="text/javascript" src="library/jquery-1.8.1.min.js"></script>
</head>
<body>

  <script>
    $(function() {
        window.client = new Caress.Client({
            host: 'localhost',
            port: 5000
        });
        client.connect();
    });
  </script>
<div id="slider3"></div>
<script type="text/javascript" src="js/map.js"></script>
<!-- <script type="text/javascript" src="js/streamgraph.js"></script> -->

<div id="option">
    <input name="updateButton"
           type="button"
           value="Show Data for second Attemp"
           onclick="updateSecond('data/folgeantraege_monatlich_2015_mitentscheidungenbisnovember.csv')" /></div>
<div id="option">
    <input name="updateButton"
           type="button"
           value="Show Data for first Attemp"
           onclick="updateFirst('data/erstantraege_monatlich_2015_mitentscheidungenbisnovember.csv')" /></div>
<div id="option">
    <input name="updateButton"
           type="button"
           value="Show both"
           onclick="updateBoth('data/erstantraege_monatlich_2015_mitentscheidungenbisnovember.csv', 'data/folgeantraege_monatlich_2015_mitentscheidungenbisnovember.csv')" /></div>


<div class="chart"></div>
<script type="text/javascript" src="js/streamgraph.js"></script>




<script>

</script>

</body>

不要介意 socket.io 和 caress-server 部分。（我也在研究多点触控，但目前这不是必需的） js 文件在我的 repo

我还更改了我的 streamgraph js 中的 d.date，因此它不会干扰我的地图日期

var graph = d3.select(".chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  d3.csv(csvpath, function(data) {
    data.forEach(function(d) {
      d.graphDate = dateParser(d.Datum);
      d.value = +d.Summe;
  });

它坏了，因为我认为读取数据有问题，因为它总是在地图部分一次投影整年，但我无法弄清楚是什么导致了这个问题。

Answer 1

像这样制作你的滑块回调函数：

dp = d3.time.format("%d.%m.%Y").parse;//NOTE: the change in variable name here
var minDate = dp("01.01.2015");
var maxDate = dp("31.12.2015");
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 dp(d.properties.date) < new Date(value);
    });
    console.log(newData);
        console.log("New set size ", newData.length);

    displaySites(newData)
  })
);

原因是steamGraph.js里面你写了 dateParser 作为 dateParser = d3.time.format("%Y-%m-%d").parse;

并且在滑块内您使用了相同的全局变量 dateParser，因此我已将变量的名称更改为 dp = d3.time.format("%d.%m.%Y").parse;

工作代码here

希望对您有所帮助！

D3.js 时间轴根本不过滤地图上的兴趣点

D3.js Timeline does not filter Points of interest on map at all

javascript

filtering

d3.js