Я объединил две визуализации разных данных. Первый показывает потоковую диаграмму данных о предоставлении убежища в Германии за последние 12 месяцев. 12months Второй - создание точек на карте. Этот пример на самом деле сейчас работает, но теперь он не работает, потому что я объединил оба в одном html файле. map

















  <сценарий>
    $ (function () {
        window.client = новый Caress.Client ({
            хост: 'localhost',
            порт: 5000
        });
        client.connect ();
    });
  
->
<сценарий>

Не обращайте внимания на socket.io и часть caress-server. (Я тоже работаю над мультитачем, но пока это не принципиально) Файлы js находятся на моем репо

Я также изменил дату d.date в моем streamgraph js, чтобы он не мешал дате моей карты

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;
  });

Он сломан, потому что я думаю, что что-то не так с чтением данных, потому что он всегда проецирует весь год сразу в части карты, но я не могу понять, что вызывает эту проблему.

basedian

Ответов: 1

Ответы (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;

Рабочий код здесь

Надеюсь, это поможет!

2022 WebDevInsider