个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
有一个示例如何在 D3 强制图中的节点上添加标签。我尝试做的是在线上添加标签。
节点上的标签示例:http://bl.ocks.org/mbostock/2706022
此代码将在左 Angular 显示行的文本。它似乎从 Canvas 而不是我的行中获取 x、y 坐标。如何解决这个问题？
var labelLine = olinks.append("text") .attr("x", 12) .attr("dy", ".35em") .text("eeeeee");
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="./Script/d3.v3/d3.v3.min.js"></script>
<script>
var graph = {
"nodes": [
{ "name": "App1-main", "group": 1 },
{ "name": "App2", "group": 1 },
{ "name": "App3", "group": 1 },
{ "name": "App4", "group": 1 },
{ "name": "Content-1", "group": 3 },
{ "name": "Content-1", "group": 3 },
{ "name": "Content-1", "group": 3 },
{ "name": "Content-1", "group": 3 },
{ "name": "Pontmercy", "group": 3 }
],
"links": [
{ "source": 1, "target": 0, "value": 1 },
{ "source": 2, "target": 0, "value": 1 },
{ "source": 0, "target": 3, "value": 1 }
]
};
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-300)
.linkDistance(60)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var drawGraph = function (graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var olinks = svg.selectAll("g.link")
.data(graph.links)
.enter().append("g")
.call(force.drag);
var link = olinks.append("line")
.attr("class", "link")
.style("stroke-width", function (d) { return Math.sqrt(d.value); });
var labelLine = olinks.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text("eeeeee");
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true);
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function (d) { return color(d.group); })
.call(force.drag);
var labels = gnodes.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function (d) { return d.name; });
console.log(labels);
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; });
gnodes.attr("transform", function (d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
};
drawGraph(graph);
</script>
最佳答案
This是具有正确行为的示例。
关键点在这里:
1) 您需要将链接定义为 SVG“g”元素，以便您可以为每个链接定义线条和标签，并正确计算坐标。
2)标签文字必须水平居中(代码:.attr("text-anchor", "middle"))。
3) 在 tick() 内部，您需要计算标签的坐标，作为源节点和目标节点之间的算术平均值。
希望这对您有所帮助。
还有 another similar question最近。
关于javascript - 强制图中一条线上的 D3 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19537052/
25
4
0
如何迭代(一行)分割函数给我的每个类？ 我试过这个: 编辑(抱歉) $("p").attr("class").split(' ').each (function (i,n){alert(n)}
我有一条垂直线和一条水平线，当我动态调整我的 Canvas 父级时，我想调整它们的大小。 (地标) 我希望水平线始终距 Canvas 的左右边界 25 处，距底部边界 13 处。 垂直线也是如此，距上
我有一个 y 变量，我试图在图形的顶部和底部针对两个相关的 x 轴绘制它(例如 y="立方体中的事物数"，x1="立方体的边长"， x2="立方体的体积")。我在 numpy 数组中有 y、x1、x2
我想画一条简单的水平线，并在这条线 flex 的地方制作动画。我有这个动画的视频。你能给我一些建议如何开始以及我必须使用哪个 js/css 吗？ 都是关于矩形底部的线: http://www.stop
我是一名优秀的程序员,十分优秀！