个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在制作 d3 力图，我喜欢在每个节点上发布一些文本。我在互联网上搜索，只找到了 SVG 解决方案，但在我的代码中，我不使用 SVG，但我发现你可以使用 d3 事件，例如鼠标悬停，但我不明白如何将其放入我的代码中。
有了这个代码结构，任何人都可以帮助我解决我的问题吗？
<body>
<h1>Graph</h1>
<canvas id="network" width="1000" height="1000"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
/* global d3 */
var canvas = d3.select("#network"),
width = canvas.attr("width"),
height = canvas.attr("height"),
ctx = canvas.node().getContext("2d"),
r = 10,
x = d3.scaleOrdinal().range([20,width -20]),
color = d3.scaleOrdinal(d3.schemeCategory20),
simulation = d3.forceSimulation()
.force("x", d3.forceX(width/2))
.force("y", d3.forceY(height/2))
.force("collide", d3.forceCollide(r+1))
.force("charge", d3.forceManyBody()
.strength(-200))
.force("link", d3.forceLink()
.id(function (d) { return d.champion; }));
d3.json("docs/Champions.json", function (err, graph) {
if (err) throw err;
simulation.nodes(graph.nodes);
simulation.force("link")
.links(graph.links);
simulation.on("tick", update);
canvas
.call(d3.drag()
.container(canvas.node())
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
function update() {
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.globalAlpha = 0.5;
ctx.strokeStyle = "#808080";
graph.links.forEach(drawLink);
ctx.stroke();
ctx.globalAlpha = 1.0;
graph.nodes.forEach(drawNode);
}
function dragsubject() {
return simulation.find(d3.event.x, d3.event.y);
}
});
function dragstarted() {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d3.event.subject.fx = d3.event.subject.x;
d3.event.subject.fy = d3.event.subject.y;
console.log(d3.event.subject.champion);
}
function dragged() {
d3.event.subject.fx = d3.event.x;
d3.event.subject.fy = d3.event.y;
}
function dragended() {
if (!d3.event.active) simulation.alphaTarget(0);
d3.event.subject.fx = null;
d3.event.subject.fy = null;
}
function drawNode(d) {
ctx.beginPath();
ctx.fillStyle = color(d.region);
ctx.moveTo(d.x, d.y);
ctx.arc(d.x, d.y, r, 0, Math.PI*2);
ctx.fill();
}
function drawLink(l) {
ctx.moveTo(l.source.x, l.source.y);
ctx.lineTo(l.target.x, l.target.y);
}
</script>
</body>
</html>
我使用的 JSON 文件就像
{ "nodes": [
{"champion":"name",
"region":"place"},
{...}
],
"links": [
{"source": "...",
"target":"..."},
{...}
]}
最佳答案
自从提出这个问题以来已经有一段时间了，但由于我也想知道如何实现原始问题中所提出的要求，因此这里是记录的解决方案:
为了添加来自例如的文本在 JSON 文件的“champion”字段中，添加以下行:
ctx.fillText(d.champion, d.x, d.y);
到函数:
function drawNode(d)
例如:
function drawNode(d) {
ctx.beginPath();
ctx.fillStyle = color(d.region);
ctx.moveTo(d.x, d.y);
ctx.arc(d.x, d.y, r, 0, Math.PI*2);
ctx.fill();
ctx.fillText(d.champion, d.x, d.y);
}
关于javascript - 谁能帮我向 d3 力图添加文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45723717/
26
4
0
这个问题在这里已经有了答案: Does Force-Directed Layout of d3-js support image as node? (1 个回答) 关闭 9 年前。 我正在开发一个
我正在寻求开发一个由节点链接图组成的可视化。我有一系列点，我不想更改其位置，除非图表上发生碰撞(一个节点与另一个节点)。如果节点发生碰撞，我想将它们隔开，这样它们就不会重叠。我的JS代码如下 var
我正在尝试将缩放和比例级别保存到数据库。我取得了进步，但有一些问题需要解决。 事情就是这样。在我的力图初始渲染中，我的缩放级别是准确的。换句话说，这就是我所做的: svg.append("defs"
我已经在这几天了，我已经看到了 stackoverflow 和其他地方的问题，但我遗漏了一些东西。 假设我们有以下 JSON: { "nodes":[ {"name":"node1"},
我有以下 svg，它在一个较大的圆圈中间有文本，并用一条线连接到另外两个较小的圆圈。 线坐标由以下公式得到: x1={Math.max(radius, Math.min(height
我正在寻找一种方法，将新节点引入到来自全新数据(例如来自数据流)的力导向有向图中。 在 mbostock 的示例中(this 或 this)，节点能够顺利进入和退出，因为在初始设置中，每个节点都被渲染
SO上有类似的问题，但我根本不知道如何在我的情况下使用它。我正在尝试向力图添加缩放/平移功能。我对 D3.js 的了解很基础，请原谅我的愚蠢问题。 这是原来的fiddle从这里website . 还有
在力导向图中使用图像作为节点时遇到问题。到目前为止我看到的所有内容似乎都是 v3 代码，而且到目前为止我根本无法获取任何图像，无论是使用 xlink:href 还是 svg:image 或两者都使用。
Stackoverflow 社区您好!我在 d3force 定向图中无法使用 d3 Zoom。我可以实现它的缩放和平移，但这样做会破坏节点和链接之间的对齐，我不知道如何修复它......我创建了一个
我是一名优秀的程序员,十分优秀！