javascript - D3.js 可观察力布局,标签未出现
问题描述
chart = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.force("link", d3.forceLink().distance(function(d) {return d.value;}).strength(0.1))
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.id));
const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.attr("class", "labels")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 10)
.attr("fill", color)
.call(drag(simulation));
var lables = node.append("text")
.text(function(d) {
return d.id;
})
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(d => d.id);
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
我正在尝试为每个节点添加标签。请注意上面的标签代码。这会将标签添加到节点元素(由浏览器控制台确认),但标签不会出现:
由于 D3 不支持 z-index,因此添加元素的顺序显然是错误的。如何使标签出现在每个节点上?
解决方案
这是更新后的 Observable。
问题是您在“内部”添加了文本,circle
而这在 SVG 中是不可能的。解决方案是创建 a而group
不是 a ,在函数中circle
使用translate
instead cx
and ,最后在. 我希望它有所帮助。cy
tick
circle
text
group
推荐阅读
- angular - 如何在 Angular 8 中正确实现 HTTP 拦截器?
- flutter - 为什么在 StatefulWidget 中没有定义 build 方法?
- python - uWSGI 应用程序找不到挂载点,但加载了 html
- c# - 如何将返回代码添加到位于单独的 xaml 文件(没有 .cs 文件相关)中的数据模板控件的事件?
- javascript - 弹性 - 优先排序值
- android - 键盘向上滑动并覆盖 Flutter 中的 TextField
- python - 如何获取属性的实际文档字符串
- r - r中特定时间范围的时间平均值
- html - 如何将 LinearGradient 保存到数据库
- xamarin - 富文本块中的虚线下划线