Question

我在d3.js v4上使用了Zoomable Sunburst：https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099

它运作良好，但现在我添加了一个搜索引擎，查找馅饼的父母和孩子的名字。我正在捕获名称并在饼图中找到它，但我现在正在尝试根据搜索的名称将其放大/转换到选定的弧。在默认设置中，它会根据点击进行放大和缩小，但我想将其更改为放大到搜索引擎中键入的元素/弧。到目前为止，我只是根据搜索到的名称，根据选定的弧来改变不透明度：

$( ".searchbutton" ).click(function() {
    var tc = $(this).closest("form").find("input[type='search']").val();
    console.log(tc)   
    svg.selectAll("path")[0].forEach(function (d) {
      if (d3.select(d).data()[0].name == tc) {
          d3.select(d).style("opacity", 1);
      } else {
        d3.select(d).style("opacity", 0.1);
      }
    }) 
});

任何想法如何实现这一目标？我应该按名称搜索弧并使用编程方式单击边界坐标吗？

Answer 1

我希望这就是你的意思。只需获取数据并按名称过滤即可。您可以获取已过滤的数组并使用此数据调用click函数

WORKING FIDDLE

$("#input").on('input', function(e){
    let val = $(e.currentTarget).val()
    console.log(svg.selectAll("path").data())
   let filter =  svg.selectAll("path").data().filter((el) => {
   return el.data.name == val})
   if(filter.length == 1){
        click(filter[0])
   }

});

根据搜索到的名称转换D3森伯斯特派

1 个答案: