D3.js 中的array_replace？

Posted 2023-02-22

【中文标题】D3.js 中的array_replace？

【英文标题】：array_replace in D3.js?

【发布时间】：2013-04-20 10:22:56

【问题描述】：

我有 2 个 CSV 文件，一个描述树的链接（graph.csv - 2 列：源和目标），另一个是节点名称的字典（nodes.csv - 2 列：node_id、node_name ）。带有源/目标的 CSV 引用第二个 CSV 中的 node_id 列。

现在我想使用第二个 CSV 将节点名称（以及最终的其他属性）附加到树中的节点。我已经想出了如何将文本附加到节点，但我不知道如何 "cross" 第二个 CSV 中的数据将每个节点的名称作为文本附加到相应的节点。

我让这段代码按我想要的方式工作，但现在它只根据 Mike Bostock 的 answer here in SO 从第一个 CSV 中提取节点。现在我不知道哪个节点是哪个节点，我想使用第二个 CSV 来识别节点。

据我所知，这段代码显然识别了 graph.csv 中的唯一节点，确定了根，然后构建了树。如果有办法从第一个 CSV 读取并 copy 它用第二个 CSV 中的节点名称更改节点的 ID，我认为这将是第一步，但我无法执行正确的。

CSV 示例：

graph.csv：

源，目标 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

nodes.csv：

node_id,node_name
1，节点1
2、节点2
3、节点3
4、节点4
5、节点5
6、节点6
7、节点7
8、节点8
9、节点9
10、节点10
11、节点11
12、节点12
13、节点13
14、节点14
15，节点15
16、节点16
17、节点17
18、节点18
19、节点19
20，节点20
21、节点21
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([高度，宽度]); var svg = d3.select("body").append("svg") .attr("宽度", 宽度 + margin.left + margin.right) .attr("高度", 高度 + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv（“graph.csv”，函数（链接） var 节点名称 = ; 链接.forEach（函数（链接） var parent = link.source = nodeByName(link.source), child = link.target = nodeByName(link.target); if (parent.children) parent.children.push(child); 否则 parent.children = [孩子]; ); var 节点 = tree.nodes(links[0].source); svg.selectAll(".link") .data（链接） .enter().append("行") .attr("类", "链接") .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（节点） .enter().append("圆") .attr（“类”，“节点”） .attr("r", 10) .attr("cx", function(d) return d.y; ) .attr("cy", function(d) return d.x; ); svg.selectAll("文本") .data（节点） .enter().append("文本") .attr（“类”，“标签”） .attr("x",function(d) return (d.y - 25); ) .attr("y",function(d) return (d.x + 20); ) .text("文本"); 功能节点名称（名称） 返回节点名称[名称] || (nodesByName[name] = name:name); );

有没有人知道如何“关联”这两个 CSV 并在 Text 附加中输出各自的名称？

编辑：我一直在寻找根据其他数组的内容替换数组内容的技术，我在 php 中发现了这个漂亮的函数，它可以满足我的需要：@987654322 @。现在我在 javascript/D3.js 中需要它，但我似乎可以找到完全相同的解决方案或类似的解决方案。有什么想法吗？

【参考方案1】：

我觉得最简单的方法就是把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
);

在this fiddle 中提供了一个稍作修改的代码（从 html 中的 <pre> 节点加载 csv 数据）。

【讨论】：

您好，感谢您的回复！我尝试添加您在此处发布的代码，但无济于事。我现在在 SVG 中有空的文本标签，其中应该有文本。我在您的小提琴中注意到，与我不同的是，您没有使用 d3.csv()，而是直接从字符串数组中解析了行。另外，我将所有代码都定义为 d3.csv 中的回调，您认为这可能是问题所在吗？

没关系，只是在我的回调之外编写了你的​​函数，它就起作用了。 +51 给你我的朋友！ ;)