D3.js時間軸不會過濾地圖上的興趣點

我組合了兩個可視化的不同數據。第一個展示了過去12個月德國庇護數據流圖。第二個是在地圖上產卵點。這example實際上現在正在運行，但現在它已被破壞，因爲我在一個HTML文件中組合。 D3.js時間軸不會過濾地圖上的興趣點

<!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和愛撫服務器的一部分。（我也正在多點觸控但那不是必需的時刻）的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; 
    });

它壞了，因爲我覺得事情是錯誤的數據的讀取，因爲它總是在地圖部分，一旦投影全年，但我無法弄清楚什麼導致了這個問題。

來源

2016-01-01 basedian

讓您的滑塊回調函數是這樣的：

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

希望這有助於！

來源

2016-01-01 11:54:54 Cyril

D3.js時間軸不會過濾地圖上的興趣點

回答

相關問題