Question

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

＆＃13;

<!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>

＆＃13;

不要介意socket.io和caress-server部分。（我也在做多点触控，但目前不是必不可少的） js文件位于我的repo

上

我还更改了流程图中的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时间轴根本不会过滤地图上的兴趣点

1 个答案: