массив заменить в D3.js?

У меня есть 2 CSV-файла, один из которых описывает ссылки на дерево (график.csv-2 колонки: исходная и целевая) и прочее, что является словарем для имен узлов (nodes.csv-2 колонки: node_id, node_name). CSV-файл с источника/приемника обозначает столбец ид_узла во второй CSV-файл.

Теперь я хочу использовать этот второй CSV для присоединения имен узлов (и, в конечном счете, других свойств) к узлам в дереве. Я уже понял, как добавить текст к узлу, но я не могу понять, как это сделать. "крест" данные во втором CSV для добавления имени каждого узла в виде текста к соответствующему узлу.

Я получил этот код, работающий так, как я хотел, но сейчас он только извлекает узлы из первого CSV в соответствии с ответом здесь в SO от Майка Бостока. Прямо сейчас я не могу понять, какой узел является каким, и я хотел бы использовать второй CSV для идентификации узлов.

Из того, что я могу сказать, этот код, по-видимому, идентифицирует уникальные узлы в графе.csv, определяет корень, а затем строит дерево. Если бы был способ прочитать из первого CSV и скопировать , изменив идентификаторы узлов с именами узлов во втором CSV, я думаю, что это был бы первый шаг, но я не могу выполнить его должным образом.

Пример CSVs:

Граф.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 и вывести соответствующее имя в тексте добавить?

EDIT: я искал методы для замены содержимого в массиве, основываясь на содержимом из других массивов, и я нашел эту красивую функцию в PHP, которая делает именно то, что мне нужно: array_replace. Теперь мне это нужно в Javascript/D3.но я, кажется, могу найти точно такое же решение или эквивалентное ему. Есть идеи?

1 2
javascript d3.js accessor

1 ответ:

Я думаю, что самый простой способ-сопоставить идентификатор с именем непосредственно там, где вы его используете, следующим образом: 

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
});

Слабо модифицированный код (с загрузкой csv-данных из узлов <pre> в HTML) доступен вэтой скрипке .

4