我有 2 个 CSV 文件,一个描述树的链接(graph.csv - 2 列:源和目标),另一个是节点名称的字典(nodes.csv - 2 列:node_id、node_name )。带有源/目标的 CSV 引用第二个 CSV 中的 node_id 列。
现在我想使用第二个 CSV 将节点名称(以及最终的其他属性)附加到树中的节点。我已经弄清楚如何将文本附加到节点,但我不知道如何“交叉”第二个 CSV 中的数据以将每个节点的名称作为文本附加到相应的节点。
我让这段代码按照我想要的方式工作,但现在它只根据 Mike Bostock 的 answer here in SO 从第一个 CSV 中提取节点。现在我无法确定哪个节点是哪个节点,我想使用第二个 CSV 来识别节点。
据我所知,这段代码显然识别了 graph.csv 中的唯一节点,确定根,然后构建树。如果有办法从第一个 CSV 中读取并复制它用第二个 CSV 中的节点名称更改节点 ID,我认为这将是第一步,但我无法执行正确地。
CSV 示例:
图表.csv:
source,target 1,2 1,3 1,4 2,5 2,6 11,22 14,21 3,7 3,8 4,9 4,10 5,11 5,12 5,13 6,14 6,15 7,16 8,17 9,18 10,19 10,20
节点.csv:
node_id,node_name 1,Node1 2,Node2 3,Node3 4,Node4 5,Node5 6,Node6 7,Node7 8,Node8 9,Node9 10,Node10 11,Node11 12,Node12 13,Node13 14,Node14 15,Node15 16,Node16 17,Node17 18,Node18 19,Node19 20,Node20 21,Node21 22,Node22
到目前为止的代码是:
var margin = {top: 40, right: 40, bottom: 40, left: 40}, width = 1024 - margin.left - margin.right, height = 768 - margin.top - margin.bottom; var tree = d3.layout.tree() .size([height, width]); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("graph.csv", function(links) { var nodesByName = {}; links.forEach(function(link) { var parent = link.source = nodeByName(link.source), child = link.target = nodeByName(link.target); if (parent.children) parent.children.push(child); else parent.children = [child]; }); var nodes = tree.nodes(links[0].source); svg.selectAll(".link") .data(links) .enter().append("line") .attr("class", "link") .attr("x1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.x; }) .attr("x2", function(d) { return d.target.y; }) .attr("y2", function(d) { return d.target.x; }); svg.selectAll(".node") .data(nodes) .enter().append("circle") .attr("class", "node") .attr("r", 10) .attr("cx", function(d) { return d.y; }) .attr("cy", function(d) { return d.x; }); svg.selectAll("text") .data(nodes) .enter().append("text") .attr("class", "label") .attr("x",function(d) { return (d.y - 25); }) .attr("y",function(d) { return (d.x + 20); }) .text("Text"); function nodeByName(name) { return nodesByName[name] || (nodesByName[name] = {name: name}); } });
有人知道如何“关联”两个 CSV 并在文本附加中输出各自的名称吗?
编辑:我一直在寻找基于其他数组内容来替换数组内容的技术,我在 PHP 中发现了这个漂亮的函数,它正好满足我的需要: array_replace 。现在我在 Javascript/D3.js 中需要这个,但我似乎可以找到完全相同的解决方案或等效的解决方案。有什么想法吗?
最佳答案
我认为最简单的方法是将 id 直接映射到您使用它的名称,如下所示:
svg.selectAll("text")
[...]
.text( function(d) { return namesMap[d.name]; });
假设namesMap
转换node_id
至node_name
.
现在您只需创建上述 namesMap
,例如像这样:
d3.csv("nodes.csv", function(names) {
var namesMap = {};
names.forEach(function(d) {
namesMap[d.node_id] = d.node_name;
});
// code using namesMap goes here
});
稍微修改过的代码(从 HTML 中的 <pre>
节点加载 csv 数据)可在 this fiddle 中找到。 .
关于javascript - D3.js 中的 array_replace?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16233131/