我正在尝试使用 D3 javascript 库来制作强制导向图，并且我想偏移附加到节点的文本。然而，我似乎尝试改变的属性对此没有影响。相反，我的文本覆盖在节点上，并且很难阅读:
这是我附加文本的方式:
node.append("text")
.attr("dy", -3)
.attr("text-anchor", "right")
.style("color", "white", null)
.text(function(d) { return d.name; });
我尝试了不同的 dx 和 dy 值，但似乎没有任何东西可以抵消文本。它看起来总是一样的。
<小时/>编辑:完整代码(http://g.nychis.com/force-directed.zip并打开force-edges-names.html)
<!DOCTYPE html>
<html>
<head>
<title>Force-Directed Layout</title>
<script type="text/javascript" src="d3.v2.js"></script>
<style type="text/css">
div.node {
border-radius: 12px;
width: 24px;
height: 24px;
margin: -6px 0 0 -6px;
position: absolute;
}
div.link {
position: absolute;
border-bottom: solid #999 1px;
height: 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
</head>
<body bgcolor="#000000">
<FONT COLOR="#FFFFFF">Floor: 1</FONT>
<script type="text/javascript">
var width = 700,
height = 500,
radius = 6,
fill = d3.scale.category20();
var force = d3.layout.force()
.gravity(0)
.charge(-100)
.linkDistance(function(d) { return (d.value-d.sub)*8; })
.size([width, height]);
var vis = d3.select("body").append("div")
.style("width", width + "px")
.style("height", height + "px");
d3.json("home.json", function(json) {
var link = vis.selectAll("div.link")
.data(json.links)
.enter().append("div")
.attr("class", "link");
var node = vis.selectAll("div.node")
.data(json.nodes)
.enter().append("div")
.attr("class", "node")
.style("background", function(d) { return fill(d.group); })
.style("border-color", function(d) { return d3.rgb(fill(d.group)).darker(); })
.call(force.drag);
node.append("text")
.style("color", "white", null)
.text(function(d) { return d.name; });
force
.nodes(json.nodes)
.links(json.links)
.on("tick", tick)
.start();
function tick() {
node.style("left", function(d) { return (d.x = Math.max(radius, Math.min(width - radius, d.x))) + "px"; })
.style("top", function(d) { return (d.y = Math.max(radius, Math.min(height - radius, d.y))) + "px"; });
link.style("left", function(d) { return d.source.x + "px"; })
.style("top", function(d) { return d.source.y + "px"; })
.style("width", length)
.style("-webkit-transform", transform)
.style("-moz-transform", transform)
.style("-ms-transform", transform)
.style("-o-transform", transform)
.style("transform", transform);
}
function transform(d) {
return "rotate(" + Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * 180 / Math.PI + "deg)";
}
function length(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y;
return Math.sqrt(dx * dx + dy * dy) + "px";
}
});
</script>
</body>
</html>
最佳答案
您可以翻译文本元素:
node.append("div")
.style("transform", "translate(0px,-10px)")
...
.html(...);
“transform”属性的名称取决于您使用的浏览器，请参阅here 。您可能想要设置所有这些。
关于javascript - 如何偏移 D3 节点中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15256598/