Javascript 在D3.js中,如何防止节点文本在我的树上移动或重叠?
我已经用D3创建了一个树,我遇到了一些文本字符串太长的问题。树根据树结构移动其节点,但如何考虑节点文本 如果这张图片上的“T-ALL”有一个较长的名称,它将与其右侧的节点重叠。如果时间足够长,这两个文本将无法阅读 以下是我绘制树的源代码:Javascript 在D3.js中,如何防止节点文本在我的树上移动或重叠?,javascript,text,d3.js,tree,overlap,Javascript,Text,D3.js,Tree,Overlap,我已经用D3创建了一个树,我遇到了一些文本字符串太长的问题。树根据树结构移动其节点,但如何考虑节点文本 如果这张图片上的“T-ALL”有一个较长的名称,它将与其右侧的节点重叠。如果时间足够长,这两个文本将无法阅读 以下是我绘制树的源代码: function drawTree(source) { vis.selectAll(".graphTitle") .transition().duration(800) .attr("x",
function drawTree(source) {
vis.selectAll(".graphTitle")
.transition().duration(800)
.attr("x", w/2-100)
.attr("y", -100)
.style("text-anchor", "middle")
.style("font-size", "16")
.style("font-family", "'Hoefler Text', Georgia, 'Times New Roman', serif")
.style("font-weight", "bold")
.transition().duration(700)
.attr("x", w/2-100)
.attr("y", 0)
.text(getCurrentGene());
var duration = d3.event && d3.event.altKey ? 5000 : 500;
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 60; });
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); drawTree(d); });
nodeEnter.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return "#fff"; });
nodeEnter.append("svg:text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", function(d, i) {return d.size;} )//14.5)
.style("fill", function(d, i) { return nodeColor(d.size); });
nodeUpdate.select("text")
.text(function(d) {
if(d.name == "root"){
return "";
} else {
return d.name;
}
})
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
link.style("stroke", function(d, i){
if((i == (((link.size()/2)-1)) || i == (((link.size()/2)-2))) && (AMLsIncluded == true)){
if(AMLsIncluded){
return "white";
}else{
return "#ccc";
}
} else {
return "#ccc"
}
return "#ccc"
});
//console.log("all: " + ((link.size()/2)-2) + " - " + ((link.size()/2)-1));
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
AMLsIncluded = false;
//CSS
$(".node circle").css({"cursor":"pointer", "fill":"#fff", "stroke-opacity":".51", "stroke":"steelblue", "stroke-width":"1.5px"});
$("path.link").css({"fill":"none", "stroke-width":"1.5px"});
$(".node text").css({"font-size":"11px"});
}
欢迎提供任何帮助更改此行
通常我会把13
nodeEnter.append("svg:text") .attr("x", function(d) {
return d.children || d._children ? -13 : 13;
})
简单的回答是,树布局没有考虑这样的事情。一种选择是根据标签的长度和其他节点的位置移动标签,例如,在您提到的情况下,您可以将标签放在节点下方。是的,我有一种预感,文本没有考虑在内,我想将标签放在节点下方,这是一个很好的建议,但如果两个节点相邻,则(我的例子)并且文本字符串很长,它们仍然会重叠。另外,我知道检查长度的唯一方法是检查使用的字符量,有没有办法获得像素或类似的长度?因为有两个字符串,如“aaa”和“WWW”将具有不同的视觉长度,即使它们都有3个字符。绘制时获得精确尺寸的唯一方法是实际绘制文本,测量文本,然后移除(或调整)文本。