Как заставить HTML-флажок запускать функцию при динамическом создании с использованием D3.js - PullRequest
Новая
       3

Как заставить HTML-флажок запускать функцию при динамическом создании с использованием D3.js

0 голосов
/ 05 февраля 2019

[Издание] Я думаю, что нашел свою проблему.Это с моим CSV конвертируется в JSON.В моем D3 я использую myJSON = JSON.parse (JSON.stringify (data));сделать мой JSON.Проблема в том, что мои слова - это строки.Когда я помещаю оригинальный JSON в мой JavaScript, все работает с моими флажками D3.Когда я использую конвертированную версию, это не сработало.Итак, мой вопрос сейчас заключается в том, как преобразовать мой CSV-файл в объекты, а не строки, в мой D3 и поместить в глобальную переменную JSON?Поэтому мне нужно преобразовать строковые числа в реальные числа в процессе преобразования (CSV в JSON).

Я нашел концепцию, которая прекрасно работает!Вот ссылка на jsFiddle из примера, который я использовал: https://jsfiddle.net/xf4fwwme/44/.

Однако, чтобы немного изменить эту концепцию, которая будет работать лучше всего, я использовал D3.js для динамического создания флажков и загрузкиданные из файла CSV, а затем JSON.parse (JSON.stringify (data)) данные в глобальный объект / переменную json, так что я могу проще обновлять свои флажки и данные, используя файл CSV.Мне удалось создать флажки, но я могу запустить функцию, как в примере с jsfiddle выше.Это хорошо работает, когда я жестко кодирую флажок HTML на место, но когда динамически добавляется с D3.js, у меня ничего не работает.Это кажется легким делом, но я просто не могу заставить его запустить функцию.Ниже я использую скрипт формы флажка D3.Все остальное похоже на приведенный выше пример jsfiddle.Любая помощь для решения этой проблемы будет принята с благодарностью.Заранее спасибо.

Отлично работает, когда я жестко кодирую HTML, как показано ниже;как пример jsfiddle: 

<div class="checkboxWrapper">

<div id="form">

<input type="checkbox" id="cbAdults" checked>Adults

<input type="checkbox" id="cbYouth" checked>Youth

<input type="checkbox" id="cbSeniors" checked>Seniors

<input type="checkbox" id="cbMen" checked>Men

<input type="checkbox" id="cbWomen" checked>Women
<br>

<button id="btnForm">Filter</button>

</div>
</div>

Это не будет работать таким образом.Флажки и данные загружаются динамически с помощью D3.js. 

var myJSON;

d3.csv("data/checkboxData.csv", function(error, data) {
  if (error) {
    alert("Data didn't load, Refresh your browser");
  } else {
    myJSON = JSON.parse(JSON.stringify(data)); //convert CSV data to JSON and load in Global variable

    var selectBox = d3.select("#form")
      .selectAll("input")
      .data(data)
      .enter()
      .append("label")
      .append("input")
      .attr("checked", true)
      .attr("type", "checkbox")
      .attr("id", function(d, i) {
        return d.cbID;
      })
      .attr("onClick", filter()) ////can't get this to run the function
    .on('change', filter()) /////and I can't get this to run the function
    .attr("for", function(d, i) {
      return i;
    });

    d3.selectAll("#form label")
      .data(data)
      .attr("class", "checkbox")
      .append("text").text(function(d) {
        return " " + d.checkBoxValue
      })
  }
});

let myMarkers = L.featureGroup().addTo(map);
btnForm.onclick = () => filter();

filter();


function filter() {
  myMarkers.clearLayers();

  let myJSONcopy = JSON.parse(JSON.stringify(myJSON));

  let categories = [];

  if (cbAdults.checked) {
    categories.push('adults');
  }
  if (cbYouth.checked) {
    categories.push('youth');
  }
  if (cbSeniors.checked) {
    categories.push('seniors')
  }
  if (cbMen.checked) {
    categories.push('men');
  }
  if (cbWomen.checked) {
    categories.push('women');
  }

  for (let i = 0; i < myJSONcopy.length; i++) {
    for (let j = 0; j < categories.length; j++) {
      for (let k = 0; k < myJSONcopy[i].demographic.length; k++)
        if (categories[j] == myJSONcopy[i].demographic[k] &&
          !myJSONcopy[i].added) {

          L.circleMarker([myJSONcopy[i].lat, myJSONcopy[i].lon], {
            color: myJSONcopy[i].color,
            fillColor: myJSONcopy[i].color,
            fillOpacity: 1,
            radius: 10.0
          }).addTo(myMarkers);

          myJSONcopy[i].added = true;

          ///Fit to bounds
          map.fitBounds(myMarkers.getBounds(), {
            padding: [150, 150],
            animate: true,
            duration: 2
          });
          break;
        }
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="checkboxWrapper">
  <div id="form"></div>
  <br>
  <button id="btnForm">Filter</button>
</div>
...