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

时间:2016-12-22 15:11:36

标签: javascript d3.js

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

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

举个例子: A1和A2是我的节点。 A1发送到A2两个文件,A2发送到A1 1文件。 当单击连接节点A1和A2的链接时,我想查看正在发送的文件,以及从哪里到哪里(方向)。我有一个工作功能,在节点点击我得到一个弹出窗口,显示节点相关的数据。我需要做类似的链接。  小提琴在这里: 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);   
}

1 个答案:

答案 0 :(得分:1)

而不是:

.text(d.source)

.text(d.target)

必须是:

.text(d.source.name)

.text(d.target.name)

关于"文件描述"和"文件名",我无能为力,因为你的File_Desc数组中既没有DataName也没有links属性。

这是您更新的小提琴:https://jsfiddle.net/zygj0nkj/