Javascript d3.js基于从json文件获取的动态数据筛选节点

我已显示/隐藏我的部队布局图的链接/节点。 然而，我想从文件中动态读取我的类别列表，我不想硬编码它们。所以我已经有了这个：

function createFilter()
    {

        d3.select(".filterContainer").selectAll("div")
            .data(["category1", "category2", "category3"])
            .enter()
            .append("div")
            .attr("class", "checkbox-container")
            .append("label")
            .each(function(d) {
                // create checkbox for each data
                d3.select(this)
                    .append("input")
                    .attr("type", "checkbox")
                    .attr("id", function(d) {return "chk_" + d;})
                    .attr("checked", true)
                    .on("click", function(d, i) {
                        // register on click event
                        var lVisibility = this.checked? "visible":"hidden";
                        filterGraph(d, lVisibility);
                    })
                d3.select(this).append("span")
                    .text(function(d){return d;});
            });

    }

如何更改数据以从包含对象数组的CategList中读取类别，每个对象包含，例如：

{
    "nodes": [
        {"country": "US", "name": "saint peter's"},
        {"country": "Brazil", "name": "saint joseph's"}        
        ...
    ],
    "links": [ ... ],
    "CategList": [
                {
                    "categ": "category1",
                    "id": "US"
                },
                {
                    "categ": "category2",
                    "id": "BR"
                },
                {
                    "categ": "category3",
                    "id": "DE"
                },
            ]   
}

如何循环遍历所有对象并提取类别并将其传递给d3的.data

更新： 如何将其传递到multiselector的下拉菜单中，而不是作为复选框传递到.filterContainer中

<div class="checkbox new-check check-primary">
    <input type="checkbox"  id="type_filter" />
    <label for="type_filter">Types</label>
    <br>
</div>
<select class="selectpicker" id="type_multiselector" multiple>
    <option>category1</option>
    <option>category2</option>
    <option>category3</option>
</select>

---

只需映射数据，创建一个只包含类别的新变量，然后将其传递给d3

大概是这样的：

const json = {
  "nodes": [
    {"country": "US", "name": "saint peter's"},
    {"country": "Brazil", "name": "saint joseph's"}        
  ],
  "links": [  ],
  "CategList": [
        {
          "categ": "category1",
          "id": "US"
        },
        {
          "categ": "category2",
          "id": "BR"
        },
        {
          "categ": "category3",
          "id": "DE"
        },
      ]   
}

const myData = json.CategList.map(o => o.categ)

function createFilter()
{

    d3.select(".filterContainer").selectAll("div")
        .data(myData)
        .enter()
        .append("div")
        .attr("class", "checkbox-container")
        .append("label")
        .each(function(d) {
            // create checkbox for each data
            d3.select(this)
                .append("input")
                .attr("type", "checkbox")
                .attr("id", function(d) {return "chk_" + d;})
                .attr("checked", true)
                .on("click", function(d, i) {
                    // register on click event
                    var lVisibility = this.checked? "visible":"hidden";
                    filterGraph(d, lVisibility);
                })
            d3.select(this).append("span")
                .text(function(d){return d;});
        });

}

回应您的评论：我不太清楚，但大致如下：

function createFilter()
{

    d3.select(".filterContainer").selectAll("div")
        .data(myData)
        .enter()
        .append("div")
        .attr("class", "select-wrapper")
        .append("select")
        .each(function(d) {
            // create select option for each data
            d3.select(this)
                .append("option")
                .attr("id", function(d) {return "chk_" + d;})
                .text(function(d){return d;});
        });

}

---

有没有可能根据我发布的问题更新来更新你的答案？既然您回答了这个问题，我想您也会很容易找到更新的解决方案。无论如何，我已经接受了你的回答，因为它回答了主要部分。谢谢你我不知道，但是我已经更新了我的答案给你一些想法。你知道为什么phpstorm抛出一个const myData=TypesTab.mapo=>o.type的语法错误吗；如果=>表达式为预期表达式，如果为；应为换行符或分号。你知道为什么吗？我不知道，对不起。