javascript - 在悬停时添加文本,在 svg 圆圈上添加图像,并使节点在 d3 图中的粘性降低
问题描述
我一直在尝试创建一个静态 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>
以下是我的 json 文件:
{
"nodes": [
{"x": 200, "y": 200, "title": "lmao", "t": "Info here", "img": "https://cdn2.iconfinder.com/data/icons/capsocial-square-flat-3/500/github-512.png"},
{"x": 300, "y": 200, "title": "lmao", "t": "Info here", "img": "https://cdn2.iconfinder.com/data/icons/capsocial-square-flat-3/500/github-512.png"},
{"x": 400, "y": 200, "title": "lmao", "t": "Info here", "img": "https://cdn2.iconfinder.com/data/icons/capsocial-square-flat-3/500/github-512.png"},
{"x": 500, "y": 300, "title": "lmao", "t": "Info here", "img": "https://cdn2.iconfinder.com/data/icons/capsocial-square-flat-3/500/github-512.png"}
],
"links": [
{"source": 0, "target": 1},
{"source": 1, "target": 2},
{"source": 2, "target": 3}
]
}
下面是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 圆圈的代码片段。但我似乎在某个地方出错了。我还想让节点不那么粘,链接更有弹性,这样它们就可以被拖到任何地方,但我不知道该怎么做。谁能帮帮我吗?
谢谢
解决方案
实现了如何将信息放在悬停上(多个信息):
// 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);
});
将以下部分添加到 css 中:
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; });