javascript - 如何使 HTML 复选框在使用 D3.js 动态创建时运行函数

Question

[版] 我想我发现了我的问题。我的 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>

标签： javascripthtmld3.jsleaflet