javascript - d3.js - 如何在弹出窗口中显示链接相关数据(例如源和目标)

Question

我正在寻找一种在单击链接时在弹出窗口中显示链接相关数据的方法。

一个链接可能包含有关节点之间多个连接的信息。

举个例子:A1和A2是我的节点。A1向A2发送两个文件，A2向A1发送1个文件。当单击连接节点 A1 和 A2 的链接时，我想查看正在发送哪些文件，以及从哪里发送到哪里(方向)。我有一个工作功能，在节点上单击我会得到一个弹出窗口，其中显示与节点相关的数据。我需要对链接做类似的事情。 fiddle 在这里: https://jsfiddle.net/Alexey_D3/xhx3L8jn/29/

var dashboard2 = d3.select("body").append("section2")
    .attr("class", dashboard2)
    .attr("x", 0)
    .attr("y", 0);  

function linkClick (d) {

if($.inArray(d.source, d.target, items) !== -1){return}                                                           
    if (dashboard2.data && d.source === dashboard2.data.source) {
        dashboard2.style("visibility", "visible")
        return;     }

        dashboard2.data = d;
    d3.selectAll(".text-tip2").remove();


dashboard2.append("text")
    .attr("class", "text-tip2").text(d.source)
    .style("display", "block")
    .style("color", "black")
    .style("padding", "15px")
    .style("font-family", "roboto")
    .style("font-size", "20px");

dashboard2.append("text")
    .attr("class", "text-tip2").text(d.target)
    .style("display", "block")
    .style("color", "black")
    .style("padding", "15px")
    .style("font-family", "roboto")
    .style("font-size", "20px");

dashboard2.append("text")
    .attr("class", "text-tip2").text("File Description: " + d.File_Desc);   

dashboard2.append("text")
    .attr("class", "text-tip2").text("File Name: " + d.DataName);   
}

Answer 1

而不是:

.text(d.source)

和

.text(d.target)

它必须是:

.text(d.source.name)

还有

.text(d.target.name)

关于“文件描述”和“文件名”，我无能为力，因为您的 中既没有 File_Desc 也没有 DataName 属性链接数组。

这是您更新的 fiddle :https://jsfiddle.net/zygj0nkj/