javascript d3 - 在Sunburst中添加搜索选项

Question

有谁能告诉我如何在森伯斯特添加搜索功能？

http://bl.ocks.org/kerryrodden/477c1bfb081b783f80ad

我正在尝试包含一个文本输入，用于突出显示名称属性与给定输入匹配的弧。 谢谢。

Answer 1

您可以添加搜索文本和按钮。 所以现在点击遍历所有路径并将其不透明度设置为0.1。 匹配的那个使其不透明度为1.

这样的事情：

d3.select("body").append("input").attr("id", "searchid");
d3.select("body").append("button")
    .attr("type", "button")
    .text("search")
    .on('click', function () {
    svg.selectAll("path")[0].forEach(function (d) {
        d3.select(d).style("opacity", 1); //making all paths to opacity 1
        if (d3.select(d).data()[0].name == document.getElementById("searchid").value) {
            d3.select(d).style("opacity", 1);//making matching path's to opacity 1

        } else {
            d3.select(d).style("opacity", 0.1);//making matching path's to opacity 0.1
        }
    })

});

工作代码here。

在示例中，在JSON中搜索名称。