javascript - 基于搜索名称的 D3 sunburst 派上的过渡

Question

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

效果很好，但现在我添加了一个搜索引擎来查找馅饼的 parent 和 child 的名字。我正在捕获名称并在饼图中找到它，但我现在正在尝试根据搜索的名称将其放大/过渡到选定的弧线。在其默认设置中，它会根据点击进行放大和缩小，但我想将其更改为放大搜索引擎中键入的元素/弧。到现在为止，我只是根据搜索到的名称更改了基于所选弧线的不透明度:

$( ".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

我希望这就是你的意思。只需获取数据并按名称过滤即可。你可以得到一个过滤后的数组，并用这个数据调用点击函数

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])
   }

});