Question

在图表加载时，链接上不会有任何linkText。如果鼠标悬停在图表中的节点（源节点）上，它应该在与源节点的相邻连接节点的弧链路上显示linkText，并且在鼠标输出时，链接文本应该再次消失。我创建了一个jsfiddle sample project。我是d3.js的新手，需要建议/帮助来实现它。

var linktext = svg.append("svg:g").selectAll("g.linklabelholder").data(force.links());

linktext.enter().append("g").attr("class", "linklabelholder")
 .append("text")
 .attr("class", "linklabel")
 .style("font-size", "13px")
 .attr("x", "50")
 .attr("y", "-20")
 .attr("text-anchor", "start")
   .style("fill","#000")
 .append("textPath")
.attr("xlink:href",function(d,i) { return "#linkId_" + i;})
 .text(function(d) { 
 return d.type; 
 });


 function mouseover(d) {
    d3.selectAll(".node").attr("r",18).style("stroke","black");
d3.selectAll(".link").style("stroke","black").style("stroke-width",2);
d3.selectAll(".link").transition().duration(500)
    .style("opacity", function(o) {
        return o.source === d || o.target === d ? 1 : .1;
}); 
d3.selectAll(".node").transition().duration(500)
    .style("opacity", function(o) {
        return neighboring(d, o) ? 1 : .1;
    });}
function mouseout() {
d3.selectAll(".node").attr("r",12).style("stroke","white");
d3.selectAll(".link").attr("class", "link")
.append("line").attr("class", "link-line").style("stroke-width",1);
d3.selectAll(".link").transition().duration(500)
    .style("opacity", 1);
d3.selectAll(".node").transition().duration(500)
    .style("opacity", 1);}

Answer 1

要首先解决这个问题，你需要在linktext中添加一个类，以便我们能够根据条件设置其不透明度。

linktext.enter().append("g").attr("class", "linklabelholder")
    .append("text")
    .attr("class", "linklabel") //setting a class
    .style("opacity", 0) //initailly making the link text invisible
    .style("font-size", "13px")
    .attr("x", "50")
    .attr("y", "-20")
    .attr("text-anchor", "start")
    .style("fill", "#000")
    .append("textPath")
    .attr("xlink:href", function (d, i) {
    return "#linkId_" + i;
})
    .text(function (d) {
    return d.type;
});

现在在鼠标上执行以下操作，根据其连接的节点设置其opaciy。

d3.selectAll(".linklabel").transition().duration(500)
    .style("opacity", function (o) {
    return o.source === d || o.target === d ? 1 : 0;//setting the opacity
});

在鼠标输出时将不透明度设置为0，使其变为不可见：

d3.selectAll(".linklabel").transition().duration(500)
    .style("opacity", 0);

简单！

完整更正的代码here。

鼠标悬停在linkText上应该显示d3.js的强制布局

1 个答案: