Функция поиска на D3.js

Я хотел бы создать функцию поиска для всего круга в D3.js. Проблема в том, что я не могу выбрать особый элемент из своего текстового поля, но я могу выбрать все элементы для их скрыть. Другой вопрос, это хорошее решение для поиска элемента, чтобы скрыть его? Это моя функция, чтобы скрыть запись:Функция поиска на D3.js

function myFunction(){ 
    var myBubble = document.getElementById("targetNode").value; 
    var theNode = d3.select(myBubble.id); 
     d3.selectAll("circle").style("opacity","0"); 
     d3.selectAll("text").style("opacity","0"); 
     theNode.style("opacity","1"); 
}

Это онлайн пример проблемы: https://plnkr.co/edit/tFgMhomgn2sKazK674Kl?p=preview Большое спасибо!

источник

2016-05-02 Anonyme

Выберите все узлы, а затем filter искомым путем сравнения данных, связанные с узлом:

function hideItem(){ 
    var itemName = document.getElementById("targetNode").value; 
    var theNode = d3.selectAll(".node") 
        .filter(function(d) { return d.className === itemName }); 
    d3.selectAll(".node").style("opacity","0"); 
    theNode.style("opacity","1"); 
}

https://plnkr.co/edit/pF4EYzE4V3x4T5KMILEM

источник

2016-05-02 09:03:15

Спасибо, это работает! Слишком плохо, что не существует «реальной» функции для поиска, потому что я не могу упаковать(), чтобы сосредоточить ее. – Anonyme

Было бы возможно, но с другим подходом. Вместо изменения непрозрачности вам необходимо удалить ненужные узлы. Суть этого подхода заключается в том, что вы перестраиваете график каждый раз, когда данные изменяются. D3 включает в себя специальную концепцию: ввод, обновление и выход. Фактически вы используете выбор enter(). Вы можете думать о функции поиска, поскольку она создаст новые данные для вашей диаграммы. –

Здесь. Вы можете легко обнаружить, что вы не указали идентификаторы узлов, но получаете их. Вы можете сделать это, как и plnkr.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Hide item</title> 
</head> 

<body> 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 

    var diameter = 900, 
      format = d3.format(",d"), 
      color = d3.scale.category20c(); 

    var bubble = d3.layout.pack() 
      .sort(null) 
      .size([diameter, diameter]) 
      .value(function(d) { return (d.life+1); }) 
      .padding(1.5); 

    var svg = d3.select("body").append("svg") 
      .attr("width", diameter) 
      .attr("height", diameter) 
      .attr("class", "bubble"); 

    d3.json("./data.json", function(error, root) { 
     if (error) throw error; 

     var node = svg.selectAll(".node") 
       .data(bubble.nodes(classes(root)) 
       .filter(function(d) { return !d.children; })) 
       .enter().append("g") 
       .attr("class", "node") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

     node.append("title") 
       .text(function(d) { return d.className + ": " + format(d.value); }); 

     node.append("circle") 
       .attr("r", function(d) { return d.r; }) 
       .style("opacity","1") 
       .style("fill", function(d){ 
        if (d.level == 1){ 
         return "red" 
        } else if (d.level == 2){ 
         return "orange" 
        } else if (d.level == 3){ 
         return "#66a3ff" 
        } else { 
         return "green" 
        } 
       }); 

     var value = function(d) { return d.className.substring(0, d.r/3); }; 
     node.append("text") 
       .attr("dy", ".3em") 
       .style("text-anchor", "middle") 
       .attr("id", value) 
       .text(value) 
       .style("opacity","1"); 
    }); 

    // Returns a flattened hierarchy containing all leaf nodes under the root. 
    function classes(root) { 
     var classes = []; 
     function recurse(name, node) { 
      if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
      else classes.push({packageName: name, className: node.name, value: node.life, life: node.life, level: node.level}); 
     } 
     recurse(null, root); 
     return {children: classes}; 
    } 
    d3.select(self.frameElement).style("height", diameter + "px"); 

</script> 
<input id="targetNode" name="targetNode" type="text" /> 
<button onclick="hideItem()">grow node</button> 
<br> 

<script type="text/javascript"> 
    function hideItem(){ 
     var itemName = document.getElementById("targetNode").value; 
     console.log(itemName); 
     var theNode = d3.select("#" + itemName); 
     console.log(theNode); 
      d3.selectAll("circle").style("opacity","0"); 
      d3.selectAll("text").style("opacity","0"); 
      d3.select(theNode.node().parentNode).selectAll("circle,text").style("opacity","1"); 
    } 
</script> 
</body>

Plnkr

источник

2016-05-02 09:11:23

Потому что вам нужно изменить opacity всех ваших кругов, самый эффективный способ сделать это может быть, чтобы выбрать группы всех кругов и выборочно применять непрозрачность. Значение, которое будет возвращено, можно определить жгутов обратного вызова, предоставленной .attr("opacity", cb) путем сравнения связанные данные className-х до значения вашего поля ввода:

function hideItem(){ 
    var itemName = document.getElementById("targetNode").value; 
    d3.selectAll(".node") 
     .attr("opacity", function(d) { 
     return d.className === itemName ? "1" : "0"; 
     }) 
}

Смотрите этот обновленный Plunk.

источник

2016-05-02 11:22:30 altocumulus

ответ

Смежные вопросы