javascript d3 - Добавление опции поиска в Sunburst

Question

Может кто-нибудь скажет мне, как мы можем добавить функцию поиска к sunburst?

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.

Примите это как ответ, если это поможет!