Question

我尝试在我的javascript按钮后添加多个工具提示到D3节点＆＃34;查找所有匹配项＆＃34;被压了。

现在，我的代码已设置好，以便用户点击某个节点。接下来当他们按下按钮＆＃34;找到所有匹配＆＃34;它会将具有相同属性（properties.represents）的所有节点的颜色更改为蓝色。＆＃34;查找所有匹配项＆＃34;按钮看起来像这样：

    <button id="findRep" onclick="findRep()" type="button">Find all matches</button>

按下此按钮时，它调用findRep（）函数，到目前为止的代码如下所示：

function findRep() {

    //Dont highlight all the nodes with no represents value
    if (currRepresents !== undefined) {

        //Filter through all nodes to find matches, and color them blue
        svg.selectAll(".node")
        .filter(function(d) { return d.properties.represents == currRepresents; })
        .style('fill', 'blue')
        // ADD TOOLTIP HERE //
    }
}

该节点可以具有我可能希望在工具提示中显示的以下属性：

1.Node.name

2.Node.type

3.Node.Id

4.Node.properties.represents

如何为每个节点添加工具提示，以便所有变为蓝色的节点也在工具提示中显示一些此类信息？感谢您的时间和帮助，我对javascript已经相对了解并且刚刚开始使用D3！任何帮助都会得到满足。下面我添加了完整的index.html文件。

<div id="console">
<button type="button">Find available data</button>
<button id="findRep" onclick="findRep()" type="button">Find all matches</button>
<button id="repMatch" onclick="findRepresents()" type="button">Suggest match</button>
<button type="button">Suggest intermediate</button>
<div id="metainfo"></div>
</div>

<div id="graph">
</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" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<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; });

                    //d3.json("/node_info", function(error, nodeInfo){if(error) return;})
                    var metainf = "";

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

                    metainf = metainf.concat("Title: ", n.name, "<br/>Label: ", n.type, "<br/>Represents: ", currRepresents);
                    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; });

                });
    });

    function findRep() {

        //Dont highlight all the nodes with no represents value
        if (currRepresents !== undefined) {

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

        }
    }


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

在onClick事件之后为SVG节点添加多个工具提示

0 个答案: