在javascript中使用d3.js进行数据可视化

Question

我已经用d3js实现了我的代码，并且想要将我的数据可视化，但是我不知道如何继续实现 我的问题是我想通过单击节点列表分配给关键字的出版物将被调用。突出显示可视化中当前选定的节点。

我想在可视化文件的灰色区域（#selection_details）显示发布列表。显示每个出版物的作者，标题和出版年份。

（其实我有一些问题的变化JSON structur！）

，你可以在这里看到jsfiddle我的代码。

Answer 1

制作按照您的代码更改添加作者，标题和出版年细节势必节点JSON数据。

var repeats = Object.keys(bib).reduce((a, v) => { 
    bib[v].keywords.split(/\s*,\s*/).forEach(kw => { 
    a[kw] = a[kw] || { 
     repeat: 0 
    }; 
    a[kw].test = (a[kw.id]) 
    a[kw].repeat++; 
    a[kw].title = bib[v].title; 
    a[kw].author = bib[v].author; 
    a[kw].year = bib[v].year; 
    }); 
    return a; 
}, {}); 

要在点击节点时在div中显示发布详情，请尝试如下所示。

node.on("click", function(d) { 
    //Clear existing details if any 
    d3.select("#selection_details") 
    .select("*") 
    .remove(); 
    //Show publication details 
    var html = "<P><B>Author:</B> " + d.author + "</P> <P><B>Title:</B> " + d.title + "</P> <P><B>Year of Publication:</B> " + d.year + "</P>"; 
    d3.select("#selection_details") 
    .html(html); 
}); 

更新小提琴：https://jsfiddle.net/ofcncsfL/2/