Javascript 在单击按钮后为SVG节点添加多个工具提示

我试图通过单击按钮来显示具有相关属性的多个SVG节点的工具提示

我一直在跟随Scott Murrays的书来创建工具提示，但在鼠标悬停事件后显示工具提示似乎很有效。我的程序在某种意义上是不同的，我想按下一个按钮[查找相关标题]，让它显示具有相同标题属性的节点的工具提示

下面是我为工具提示创建的div

<div id="tooltip" class="hidden">
    <p><strong>Important Label heading</strong></p>
    <p><span id="value">100</span>%</p>
</div>

以下是我创建每个节点的方式：

var node = svg.selectAll(".node")
        .data(graph.nodes).enter()
        .append("circle")
        .attr("class", function (d) { console.log("Represents: " + d.properties.represents); return "node "+ d.type.toString() })
        .attr("r", radius)
        .style("fill", function(d) {return d.colr; })
        .call(force.drag);

// html title attribute
node.append("title")
        .text(function (d) { return d.name; })

现在，当单击一个节点时，程序将生成用于查找具有相同属性的节点的按钮在这里，我们只是试图设置按下findTitlesBtn时的工具提示。

node.on("click", function(n)
                {
                /// Several more lines of code ///
                    getTitle = n.properties.title;

                    //Dynamically create button for finding related Titles
                    if (getTitle !== undefined) {
                        //Create the button element
                        var findTitlesBtn = document.createElement("BUTTON"); 

                        //Create the button label, and add it to the button
                        var title = document.createTextNode("Find Related Titles");      
                        findTitlesBtn.appendChild(title);

                        //Call findTitle function when button is clicked
                        findTitlesBtn.onclick = findTitle;

                        //Add button to the 'displayOptions' div inside the console
                        document.getElementById("displayOptions").appendChild(findTitlesBtn);
                    }

//Function used to find nodes with related 'Title' properties
    function findTitle() {

        //Return color of nodes back to normal
        svg.selectAll(".node").style("fill", function(d) { return d.colr; });

        //Filter through all nodes to find matching titles, color them yellow
        svg.selectAll(".node")
        .filter(function(d) { return d.properties.title == getTitle; })
        .style('fill', 'yellow')
        .onload = function(d) {

            //Get this bar's x/y values, then augment for the tooltip
            var xPosition = parseFloat(d3.select(this).attr("x"));
            var yPosition = parseFloat(d3.select(this).attr("y"));

            //Update the tooltip position and value
            d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")
            .select("#value")
            .text(d);

            //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);
        }
    }

最后，单击按钮时调用的函数。我相信它应该在这个功能。在我过滤节点后（基于它们是否具有相同的title属性），每个节点将调用一个函数，使其工具提示可见筛选的节点是我要显示工具提示的节点。

node.on("click", function(n)
                {
                /// Several more lines of code ///
                    getTitle = n.properties.title;

                    //Dynamically create button for finding related Titles
                    if (getTitle !== undefined) {
                        //Create the button element
                        var findTitlesBtn = document.createElement("BUTTON"); 

                        //Create the button label, and add it to the button
                        var title = document.createTextNode("Find Related Titles");      
                        findTitlesBtn.appendChild(title);

                        //Call findTitle function when button is clicked
                        findTitlesBtn.onclick = findTitle;

                        //Add button to the 'displayOptions' div inside the console
                        document.getElementById("displayOptions").appendChild(findTitlesBtn);
                    }

//Function used to find nodes with related 'Title' properties
    function findTitle() {

        //Return color of nodes back to normal
        svg.selectAll(".node").style("fill", function(d) { return d.colr; });

        //Filter through all nodes to find matching titles, color them yellow
        svg.selectAll(".node")
        .filter(function(d) { return d.properties.title == getTitle; })
        .style('fill', 'yellow')
        .onload = function(d) {

            //Get this bar's x/y values, then augment for the tooltip
            var xPosition = parseFloat(d3.select(this).attr("x"));
            var yPosition = parseFloat(d3.select(this).attr("y"));

            //Update the tooltip position and value
            d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")
            .select("#value")
            .text(d);

            //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);
        }
    }

然而，这是行不通的。我在网上找不到与这个特定问题相关的任何东西，也找不到我正在尝试做的事情的文档。我对Javascript没有太多经验，这是我第一次使用SVG/D3。如果您对我目前的执行有什么问题提出任何建议，我们将不胜感激！虽然我已经添加了上面代码的所有相关部分，但为了完整起见，我在下面附上了完整的脚本

以下是完整的源代码：

  <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="console">
<h2>Find all matches:</h3>
<div id="displayOptions"></div>

<div id="metainfo"></div>
</div>

<div id="graph">
</div>

<div id="tooltip" class="hidden">
    <p><strong>Important Label heading</strong></p>
    <p><span id="value">100</span>%</p>
</div>

<style type="text/css">
    .node { stroke: #222; stroke-width: 1.5px; }
    .node.Column { fill: #777; }
    .node.Table { fill: #BBB; }
    .node.JoinTable { fill: #999}
    .node.Dataset { fill: #333}
    .link { stroke: #999; stroke-width: 7px; }
    div {height: 100%;}
    html {height: 100%;}
    body {height: 100%;}
</style>


<script type="text/javascript">
    var width = 1200, height = 800, radius = 20;

    var force = d3.layout.force()
            .charge(-1000).linkDistance(150).size([width, height]);

    var svg = d3.select("#graph").append("svg")
            .attr("width", "100%").attr("height", "100%")
            .attr("pointer-events", "all");

    //var currRepresents = "null";



    d3.json("/Justin/graph", function(error, graph) {
        if (error) return;

        force.nodes(graph.nodes).links(graph.links).start();

        var link = svg.selectAll(".link")
                .data(graph.links).enter()
                .append("line").attr("class", "link");

        var node = svg.selectAll(".node")
                .data(graph.nodes).enter()
                .append("circle")
                .attr("class", function (d) { console.log("Represents: " + d.properties.represents); return "node "+ d.type.toString() })
                .attr("r", radius)
                .style("fill", function(d) {return d.colr; })
                .call(force.drag);

        // html title attribute
        node.append("title")
                .text(function (d) { return d.name; })


        var state = false;
        var last = null;
        var current = null;
        node.on("click", function(n)
                {
                    //Return color of nodes back to normal
                    svg.selectAll(".node").style("fill", function(d) { return d.colr; });

                    //Remove buttons from previous mouse click
                    var getOptionsDiv = document.getElementById("displayOptions");
                    while (getOptionsDiv.hasChildNodes()) { 
                        getOptionsDiv.removeChild(getOptionsDiv.lastChild);
                    }


                    //Get Represents property from currently selected node
                    currRepresents = n.properties.represents;

                    //Add data to meta info div
                    var metainf = "";
                    metainf = metainf.concat("Title: ", n.name, "<br/>Label: ", n.type, "<br/>Represents: ", n.properties.represents, 
                    "<br/>Column Type: ", n.properties.columntype, "<br/>Semantic Relation: ", n.properties.semanticrelation);
                    console.log(metainf);
                    d3.select("#metainfo")
                        .html(metainf);

                    last = current;
                    current = d3.select(this);
                    current.style('fill', 'red');
                    last.style('fill', function(d) { return d.colr; });

                    getTitle = n.properties.title;
                    getRepresents = n.properties.represents;
                    getColumnType = n.properties.columntype;
                    getSemanticRelation = n.properties.semanticrelation;

                    //Dynamically create button for finding related Titles
                    if (getTitle !== undefined) {
                        //Create the button element
                        var findTitlesBtn = document.createElement("BUTTON"); 

                        //Create the button label, and add it to the button
                        var title = document.createTextNode("Find Related Titles");      
                        findTitlesBtn.appendChild(title);

                        //Call findTitle function when button is clicked
                        findTitlesBtn.onclick = findTitle;

                        //Add button to the 'displayOptions' div inside the console
                        document.getElementById("displayOptions").appendChild(findTitlesBtn);
                    }

                    //Dynamically create button for finding related Represents
                    if (getRepresents !== undefined) {
                        //Create the button element
                        var findRepresentsBtn = document.createElement("BUTTON");

                        //Create the button label, and add it to the button 
                        var title = document.createTextNode("Find Related Represents");       
                        findRepresentsBtn.appendChild(title);

                        //Call findRepresents function when button is clicked
                        findRepresentsBtn.onclick = findRep;

                        //Add button to the 'displayOptions' div inside the console
                        document.getElementById("displayOptions").appendChild(findRepresentsBtn);
                    }

                    //Dynamically create button for finding related Column Types
                    if (getColumnType !== undefined) {
                        //Create the button element
                        var findColumnTypeBtn = document.createElement("BUTTON"); 

                        //Create the button label, and it to the button
                        var title = document.createTextNode("Find Related Column Types");       
                        findColumnTypeBtn.appendChild(title);

                        //Call findColType function when button is clicked
                        findColumnTypeBtn.onclick = findColType;

                        //Add button to the 'displayOptions' div inside the console
                        document.getElementById("displayOptions").appendChild(findColumnTypeBtn);
                    }

                    //Dynamically create button for finding related Semantic Relations
                    if (getSemanticRelation !== undefined) {
                        //Create the button element
                        var findSemanticRelationsBtn = document.createElement("BUTTON"); 

                        //Create the button label, and it to the button
                        var title = document.createTextNode("Find Related Semantic Relations");       
                        findSemanticRelationsBtn.appendChild(title);

                        //Call findSemRel function when button is clicked
                        findSemanticRelationsBtn.onclick = findSemRel;

                        //Add button to the 'displayOptions' div inside the console
                        document.getElementById("displayOptions").appendChild(findSemanticRelationsBtn);
                    }



                });



        // force feed algo ticks
        force.on("tick", function() {

             node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
             .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });


            link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
        });



    });

    function findRepresents() {
        if (currRepresents == "null") {
            console.log("No node is clicked on currently!");
        } else {
            console.log(currRepresents);
        }

    }

    //Function used to find nodes with related 'Title' properties
    function findTitle() {

        //Return color of nodes back to normal
        svg.selectAll(".node").style("fill", function(d) { return d.colr; });

        //Filter through all nodes to find matching titles, color them yellow
        svg.selectAll(".node")
        .filter(function(d) { return d.properties.title == getTitle; })
        .style('fill', 'yellow')
        .onload = function(d) {

            //Get this bar's x/y values, then augment for the tooltip
            var xPosition = parseFloat(d3.select(this).attr("x"));
            var yPosition = parseFloat(d3.select(this).attr("y"));

            //Update the tooltip position and value
            d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")
            .select("#value")
            .text(d);

            //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);
        }
    }

    //Function used to find nodes with related 'Represents' properties
    function findRep() {      

        //Return color of nodes back to normal
        svg.selectAll(".node").style("fill", function(d) { return d.colr; });

        //Filter through all nodes to find matching represents, color them blue
        svg.selectAll(".node")
        .filter(function(d) { return d.properties.represents == getRepresents; })
        .style('fill', 'blue');

    }

    //Function used to find nodes with related 'Column Type' properties
    function findColType() {        

        //Return color of nodes back to normal
        svg.selectAll(".node").style("fill", function(d) { return d.colr; });

        //Filter through all nodes to find matching column types, color them green
        svg.selectAll(".node")
        .filter(function(d) { return d.properties.columntype == getColumnType; })
        .style('fill', 'green');

    }

    //Function used to find nodes with related 'Semantic Relation' properties
    function findSemRel() {     

        //Return color of nodes back to normal
        svg.selectAll(".node").style("fill", function(d) { return d.colr; });

        //Filter through all nodes to find matching semantic relations, color them orange
        svg.selectAll(".node")
        .filter(function(d) { return d.properties.semanticrelation == getSemanticRelation; })
        .style('fill', 'orange');

    }


</script>
</body>
</html>

查找所有匹配项：
重要标签标题

100%

.node{笔划：#222；笔划宽度：1.5px；}
.node.Column{fill:#777；}
.node.Table{fill:#BBB；}
.node.JoinTable{fill:#999}
.node.Dataset{fill:#333}
.link{笔划：#999；笔划宽度：7px；}
div{高度：100%；}
html{高度：100%；}
身体{高度：100%；}
变幅宽度=1200，高度=800，半径=20；
var-force=d3.layout.force（）
.费用（-1000）.连接距离（150）.尺寸（[宽度，高度]）；
var svg=d3.选择（“图形”）.追加（“svg”）
.attr（“宽度”、“100%”）。attr（“高度”、“100%”）
.attr（“指针事件”、“全部”）；
//var curr=“null”；
d3.json（“/Justin/graph”，函数（错误，图形）{
如果（错误）返回；
force.nodes（graph.nodes）.links（graph.links.start（）；
var link=svg.selectAll（“.link”）
.data（graph.links）.enter（）
.append（“行”）.attr（“类”、“链接”）；
var node=svg.selectAll（“.node”）
.data（graph.nodes）.enter（）
.附加（“圆圈”）
.attr（“类”，函数（d）{console.log（“表示：”+d.properties.Represents）；返回“节点”+d.type.toString（）}）
.attr（“r”，半径）
.style（“fill”，函数（d）{return d.colr；}）
.呼叫（强制拖动）；
//html标题属性
node.append（“标题”）
.text（函数（d）{返回d.name；}）
var状态=假；
var last=null；
无功电流=零；
节点上（“单击”，函数（n）
{
//将节点颜色恢复为正常值
selectAll（“.node”）.style（“fill”，函数（d）{return d.colr；}）；
//从上一次鼠标单击中删除按钮
var getOptionsDiv=document.getElementById（“显示选项”）；
而（getOptionsDiv.hasChildNodes（））{
getOptionsDiv.removeChild（getOptionsDiv.lastChild）；
}
//获取表示当前选定节点的属性
currRepresents=n.properties.represents；
//将数据添加到元信息div
var metainf=“”；
metainf=metainf.concat（“Title:，n.name，”
标签：，n.type，”
表示：，n.properties.Represents，
“
列类型：”，n.properties.columntype，”
语义关系：”，n.properties.semanticrelation）；
console.log（metainf）；
d3.选择（“元信息”）
.html（metainf）；
last=当前值；
电流=d3。选择（本）；
当前样式（“填充”、“红色”）；
style（'fill'，函数（d）{return d.colr；}）；
getTitle=n.properties.title；
getRepresents=n.properties.represents；
getColumnType=n.properties.columntype；
getSemanticRelation=n.properties.semanticrelation；
//动态创建用于查找相关标题的按钮
if（getTitle！==未定义）{
//创建按钮元素
var findTitlesBtn=document.createElement（“按钮”）；
//创建按钮标签，并将其添加到按钮
var title=document.createTextNode（“查找相关标题”）；
findTitlesBtn.appendChild（标题）；
//单击按钮时调用findTitle函数
findTitlesBtn.onclick=findTitle；
//将按钮添加到控制台内的“displayOptions”div
document.getElementById（“displayOptions”）.appendChild（findTitlesBtn）；
}
//动态创建用于查找相关表示的按钮
如果（getRepresents！==未定义）{
//创建按钮元素
var findRepresentsBtn=document.createElement（“按钮”）；
//创建按钮标签，并将其添加到按钮
var title=document.createTextNode（“查找相关