Javascript 在悬停时添加文本，在svg圆圈中添加图像，并使节点在d3图形中的粘性降低_Javascript_Html_D3.js_Svg

Javascript 在悬停时添加文本，在svg圆圈中添加图像，并使节点在d3图形中的粘性降低

javascript html d3.js svg

Javascript 在悬停时添加文本，在svg圆圈中添加图像，并使节点在d3图形中的粘性降低,javascript,html,d3.js,svg,Javascript,Html,D3.js,Svg,我一直在尝试创建一个静态d3图。以下是我的html代码和脚本： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <

我一直在尝试创建一个静态d3图。以下是我的html代码和脚本：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script>

            var width = 960,
                height = 500;

            var force = d3.layout.force()
                .size([width, height])
                .charge(-50)
                .gravity(0)
                .linkDistance(50)
                .on("tick", tick)
                .start();


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

            // build the arrow.
            svg.append("svg:defs").selectAll("marker")
                .data(["end"])      // Different link/path types can be defined here
                .enter().append("svg:marker")    // This section adds in the arrows
                .attr("id", String)
                .attr("viewBox", "0 -5 10 10")
                .attr("refX", 20)
                .attr("refY", 0)
                .attr("markerWidth", 12)
                .attr("markerHeight", 12)
                .attr("orient", "auto")
                .append("svg:path")
                .attr("d", "M0,-5L10,0L0,5");

            var link = svg.selectAll(".link");
            var node = svg.selectAll(".node");


            d3.json("position.json", function(error, graph) {
                if (error) throw error;

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

                link = link.data(graph.links)
                    .enter().append("line")
                    .attr("class", "link")
                    .attr("marker-end", "url(#end)"); // add the arrow with and identify it wiht the tag "end" :)

                node = node.data(graph.nodes)
                    .enter().append("circle")
                    .attr("class", "node")
                    .attr("r", 15)
                    .call(force.drag);

                // Append custom images from json ----- DOESNT WORK
                node.append("svg:image")
                    .attr("xlink:href",  function(d) { return d.img;}) // update the node with the image
                    .attr("x", function(d) { return -25;}) // how far is the image from the link??
                    .attr("y", function(d) { return -25;}) // --- same ---
                    .attr("height", 35) // size
                    .attr("width", 35);

                // Get information on hover ----- DOESNT WORK
                node.append("text")
                    .attr("class", "nodetext")
                    .attr("x",function(d) { return -25;})
                    .attr("y",function(d) { return -25;})
                    .text(function(d) { return d.text; });

                // add title to the image :) ----- DOESNT WORK
                node.append("title")
                    .attr("dx", 12) // how far is the text from the link??
                    .attr("dy", ".35em") // --- same ---
                    .text(function(d) { return d.name });

            });

            function tick() {
                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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

                force.stop();
            }

            function dragstart(d) {
                d3.select(this).classed("fixed", d.fixed = true);
            }

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

以下是css脚本：

.link {
    stroke: #ccc;
    stroke-width: 1.5px;
}

.node {
    cursor: move;
    fill: #ccc;
    stroke: #000;
    stroke-width: 1.5px;
}

.node:not(:hover) .nodetext {
    display: none;
}

嵌入到html中的javascript确实包含了代码片段，用于获取节点下方的悬停和文本信息，以及用于图像而不是svg圆圈的信息。但我好像在什么地方出了问题。我还想减少节点的粘性，增加链接的弹性，这样就可以把它们拖到任何地方，但我不知道怎么做。有人能帮我吗

谢谢

了解了如何将信息置于悬停状态（多个信息）：

这样就不需要这个块了：

// Get information on hover ----- DOESNT WORK
                node.append("text")
                    .attr("class", "nodetext")
                    .attr("x",function(d) { return -25;})
                    .attr("y",function(d) { return -25;})
                    .text(function(d) { return d.text; });

实现了如何将数据（多个数据）悬停：

// Append custom images
        node.append("svg:image")
            .attr("xlink:href",  function(d) { return d.img;}) // update the node with the image
            .attr("x", function(d) { return -5;}) // how far is the image from the link??
            .attr("y", function(d) { return -19;}) // --- same ---
            .attr("height", 35) // size
            .attr("width", 35)
            .on("mouseover", function(d) {
                div.transition()
                    .duration(200)
                    .style("opacity", .9);
                div .html( d.title  + "<br/>" + d.t)
                    .style("left", (d3.event.pageX + 10) + "px")
                    .style("top", (d3.event.pageY - 38) + "px");
            })
            .on("mouseout", function(d) {
                div.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

div.tooltip {
    position: absolute;
    text-align: center;
    width: 60px;
    height: 28px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}

// Get information on hover ----- DOESNT WORK
                node.append("text")
                    .attr("class", "nodetext")
                    .attr("x",function(d) { return -25;})
                    .attr("y",function(d) { return -25;})
                    .text(function(d) { return d.text; });