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（）選擇。您可以考慮搜索功能，因爲它會爲圖表生成新的數據。 –

這。你可以很容易地發現你沒有給節點「id」，但你得到它。你可以像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，最有效的方式這樣做可能會選擇各界團體和選擇性地將不透明度。要返回的值可以withing提供給.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

D3.js上的搜索功能

回答

相關問題