Как конвертировать в формат D3 JSON?

Несмотря на многочисленные примеры D3, данные обычно отформатируются в формате, указанном в flare.json:

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      :

У меня есть список смежности следующим образом:

A1 A2
A2 A3
A2 A4

который я хочу преобразовать в вышеуказанный формат. В настоящее время я делаю это на стороне сервера, но есть ли способ достичь этого, используя функции d3? Я нашел здесь здесь, но, похоже, для этого требуется модификация основной библиотеки d3, которую я не сторонник из-за ремонтопригодности. Любые предложения?

Ответ 1

Нет предписанного формата, поскольку вы обычно можете переопределять свои данные с помощью различных функций доступа (например, hierarchy.children) и array.map. Но формат, который вы цитируете, является, пожалуй, наиболее удобным представлением для деревьев, поскольку он работает с аксессуарами по умолчанию.

Первый вопрос: планируете ли вы отображать график или tree. Для графиков структура данных определяется в терминах nodes и links. Для деревьев вход в макет - это корень node, который может иметь массив дочерних узлов, а его листовые узлы связаны с value.

Если вы хотите отобразить график, и все, что у вас есть, это список ребер, тогда вы захотите перебрать по краям, чтобы создать массив узлов и массив ссылки. Скажем, у вас есть файл под названием "graph.csv":

source,target
A1,A2
A2,A3
A2,A4

Вы можете загрузить этот файл с помощью d3.csv, а затем создать массив узлов и ссылок:

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
  });

  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodeByName);

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

Затем вы можете передать эти узлы и ссылки на макет силы, чтобы визуализировать график:

http://bl.ocks.org/2949937

Если вы хотите создать дерево, тогда вам нужно будет немного изменить форму преобразования данных, чтобы накапливать дочерние узлы для каждого родителя.

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  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];
  });

  // Extract the root node.
  var root = links[0].source;

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

Так же:

http://bl.ocks.org/2949981

Ответ 2

D3 не требует определенного формата. Все зависит от вашего приложения. Вы можете, конечно, преобразовать список смежности в формат, используемый в flare.json, но это опять-таки будет конкретный код приложения. В общем, вы не можете этого сделать, поскольку списки смежности как таковые не имеют "головных" или "корневых" элементов, которые вам нужно будет построить. Кроме того, вам нужно будет обрабатывать циклы, сироты и т.д. Отдельно.

Учитывая, что вы в настоящее время выполняете преобразование на стороне сервера, у меня возникнет соблазн сказать, что "если он не сломан, не исправляйте его";)