在d3.js中添加文本标签以强制定向图链接
Adding text labels to force directed graph links in d3.js
我在向连接以下D3JS连接节点图中的节点的链接添加文本时遇到问题:http://jsfiddle.net/rqa0nvv2/1/
有人能向我解释一下添加它们的过程吗?
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", function(d) { if(d.value == "visible") {return "link";} else return "" })
.style("stroke-width", function(d) { return Math.sqrt(d.stroke); });
link.append("svg:title").text(function(d) { return "Unit: " + ", Formula: ";});
谢谢!
只需要几处更改即可将文本附加到边缘。
首先,当前方法的问题是将<text>
推入<line>
。这在SVG中无法完成,因此需要创建一个<g>
(组)来同时包含行和文本:
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("g")
.attr("class", "link-group")
.append("line")
.attr("class", function(d) { return d.value == "visible" ? "link" : ""; })
.style("stroke-width", function(d) { return Math.sqrt(d.stroke); });
好吧,仅仅添加这个不会在视觉上改变任何东西,但它确实创建了我们需要的组。因此,我们需要添加类似于以下内容的文本:
var linkText = svg.selectAll(".link-group")
.append("text")
.data(force.links())
.text(function(d) { return d.value == "visible" ? "edge" : ""; })
.attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
.attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); })
.attr("dy", ".25em")
.attr("text-anchor", "middle");
这会添加文本并对其进行初始定位。请随意(请!)设置文本样式,并根据您希望的外观更改内容。最后,我们需要使用力定向图使其移动:
force.on("tick", function() {
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
linkText
.attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
.attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); });
});
这当然很简单,因为这是我们已经做过的事情!
相关文章:
- Hammer.js阻止在Android Webview中点击超链接
- 如何检查链接是否有文本,并根据文本值评估条件-Jquery/JS
- 如何从外部链接JS文件
- 正在Rail应用程序中链接JS文件
- 页面加载时出现浏览器链接 JS 错误
- Chrome扩展:从弹出窗口发送数据以取消链接JS文件
- 如何制作一个按钮,当悬停在上面时,会滑动并显示链接 (JS)
- 有条件地以角度显示链接.js
- 排除具有自动链接器的特定链接.js
- 图片链接替换为其他链接JS
- 链接js和immacro来自动填写表单
- 链接JS和jQuery文件
- AngularJs -在js指令中链接js代码
- 如何在钛中链接js页面
- 为什么我不能连接到外部链接.js ?(使用Xcode插件phonegap)
- 绕过打开链接js的限制
- 如何链接JS路由变量和Symfony 2 url
- 脚本标签-不链接(JS平台游戏)
- 如何向图表添加链接.js(圆环图)
- 如何使列成为数据表中的链接.js