D3.js 上的搜索功能

Question

我想为我在 D3.js 中的所有圈子创建一个搜索功能。问题是我无法 select 我的文本框中的特定项目，但我可以 select 所有项目以隐藏它们。其他问题，搜索项目以隐藏它是一个好的解决方案吗？这是我隐藏项目的功能：

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 非常感谢！

Answer 1

Select 首先是所有节点，然后是 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

Answer 2

在这里。您可以很容易地发现您没有为节点提供 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

Answer 3

因为您需要更改所有圈子的 opacity，最有效的方法可能是 select 所有圈子的群组并 select 主动应用不透明度。通过将绑定数据的 className 与输入字段的值进行比较，可以使用提供给 .attr("opacity", cb) 的回调来确定要返回的值：

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

查看此更新 Plunk。

D3.js 上的搜索功能

Search function on D3.js

javascript

search

bubble-chart

hide

d3.js