在d3.js .html方法中选择和显示文本数据

时间:2014-07-16 20:56:23

标签: javascript d3.js

我正在d3.js制作社交网络图。我希望能够单击一个节点,并将与节点相关联的关联描述列表显示在notes div中的某个位置。如果没有关系,我希望它说“抱歉。”

我的代码中已经有一个函数(我认为)找到与我点击的节点相关联的链接,但我不知道如何使用它来处理文本。现在,代码的原始版本有助于淡出未连接到被点击的节点的链接。它看起来像这样,工作正常:

function fade(opacity) {
    return function(d) {
        //code code code//

        link.style("stroke-opacity", opacity).style("stroke-opacity", function(o) {
            return o.source === d || o.target === d ? 1 : opacity;
        });
    };
};

这是我试图开始工作的功能的状态。

function relList() {
    return function(d) {
        notes.append('div').enter().text(
        function(o) {
            return o.source === d || o.target === d ? d.relDesc : "Sorry";
        });
    }
}

据我所知,它根本没有做任何事情。当它在.html方法中时,它只显示为字符串。当它在NotesAppear函数中但在.html之外时,它不会做任何事情。

notes.append("div").html("<p class='notes'>instructions</p>");
    function NotesAppear(d) {
        notes.selectAll('*').remove();
        notes.style({'opacity': 0});

        notes.append('h1').text(d.name);
        notes.append('div')
             .html("<span class='notesH'>Relationships</span><p class='notes'>" + " " + relList() + "</p>" + //I tried putting the function here//
              '<p  class="notes">I can display the name with no problem: '+ d.name +'</p>'
            );

    relList(); //The function is also here because I have no idea.//

        notes.transition().style({'opacity': 1});
    }

我很肯定我在某个地方犯了一个根本性错误,因为我对此感到非常恐怖,但我真的无法理解,也不知道谷歌甚至要解决这个问题。

http://jsfiddle.net/tU59T/1/

0 个答案:

没有答案