d3.js 根据从 json 文件中获取的动态数据过滤节点

Question

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

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"
                },
            ]   
}

如何遍历所有对象并提取 "categ" 并将其传递给 d3 的 .data？

更新：

如何将其传递到多选器的下拉菜单中，而不是将其作为复选框传递到".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>

Answer 1

只需映射您的数据以创建一个仅包含类别的新变量，然后将其传递给 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;});
        });

}