Сворачиваемый силовой ориентированный граф D3 с данными, отличными от дерева

У меня есть принудительный граф D3, использующий данные, отличные от дерева, и ассоциации ID с индексом. Кажется, я не могу найти пример этой структуры данных в сворачиваемом силовом макете. По сути, когда вы щелкаете узел, данные для этого узла должны сворачиваться/разворачиваться, как в этом примере: http://bl.ocks.org/mbostock/1062288. Последний ответ на эти вопросы приблизился, но связывает узлы по индексу, а не по идентификатору: Как создать макет d3.js Collapsible force с данными, отличными от дерева?

Вот скрипт моего кода https://jsfiddle.net/5w86q4Lm/

Ниже приведен код, который у меня есть до сих пор

  var width = 960,
  height = 500;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var force = d3.layout.force()
  .size([width, height])
  //gravity(0.2)
  .linkDistance(height / 6)
  .charge(function(node) {
    if (node.type !== 'ORG') return -2000;
    return -30;
  });

// build the arrow.
svg.append("svg:defs").selectAll("marker")
  .data(["end"]) // Different link/path types can be defined here
  .enter().append("svg:marker") // This section adds in the arrows
  .attr("id", function(d) {
    return d;
  })
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 12)
  .attr("refY", 0)
  .attr("markerWidth", 9)
  .attr("markerHeight", 5)
  .attr("orient", "auto")
  .attr("class", "arrow")
  .append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");

d3.json("js/graph.json", function(error, json) {
  if (error) throw error;

  var edges = [];
  json.edges.forEach(function(e) {
    var sourceNode = json.nodes.filter(function(n) {
        return n.id === e.from;
      })[0],
      targetNode = json.nodes.filter(function(n) {
        return n.id === e.to;
      })[0];

    edges.push({
      source: sourceNode,
      target: targetNode,
      value: e.Value
    });
  });

  var link = svg.append("g").selectAll("path")
    .data(edges)
    .enter().append("path")
    .attr("class", "link")
    .attr("marker-end", "url(#end)");

  var node = svg.selectAll(".node")
    .data(json.nodes)
    .enter().append("g")
    .attr("class", function(d) {
      return "node " + d.type
    });

  force
    .nodes(json.nodes)
    .links(edges)
    .start();

  node.append("circle")
    .attr("class", "circle")
    .attr("r", function(d) {
      d.radius = 30;
      return d.radius
    }); // return a radius for path to use 

  node.append("text")
    .attr("x", 0)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .attr("class", "text")
    .text(function(d) {
      return d.type
    });
  // On node hover, examine the links to see if their
  // source or target properties match the hovered node.
  node.on('mouseover', function(d) {
    link.attr('class', function(l) {
      if (d === l.source || d === l.target)
        return "link active";
      else
        return "link inactive";
    });
  });

  // Set the stroke width back to normal when mouse leaves the node.
  node.on('mouseout', function() {
    link.attr('class', "link");
  });

  force.on("tick", function() {
    // make sure the nodes do not overlap the arrows
    link.attr("d", function(d) {
      // Total difference in x and y from source to target
      diffX = d.target.x - d.source.x;
      diffY = d.target.y - d.source.y;

      // Length of path from center of source node to center of target node
      pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

      // x and y distances from center to outside edge of target node
      offsetX = (diffX * d.target.radius) / pathLength;
      offsetY = (diffY * d.target.radius) / pathLength;

      return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
    });

    node.attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  });
});

И пример моего JSON

{  
   "nodes":[  
      {  
         "id":223,
         "type":"Parent",
         "properties":{  

         }
      },
      {  
         "id":136525,
         "type":"Child",
         "properties":{  
            "patient":"6090",
            "batch":"70"
         }
      },
      {  
         "id":136448,
         "type":"Child",
         "properties":{  
            "patient":"6094",
            "batch":"70"
         }
      },
      {  
         "id":136328,
         "type":"Child",
         "properties":{  
            "patient":"6082",
            "batch":"70"
         }
      },
      {  
         "id":136305,
         "type":"Child",
         "properties":{  
            "patient":"6096",
            "batch":"70"
         }
      },
      {  
         "id":136303,
         "type":"Child",
         "properties":{  
            "patient":"6093",
            "batch":"70"
         }
      },
      {  
         "id":136299,
         "type":"Child",
         "properties":{  
            "patient":"6091",
            "batch":"70"
         }
      },
      {  
         "id":136261,
         "type":"Child",
         "properties":{  
            "patient":"6089",
            "batch":"70"
         }
      },
      {  
         "id":136212,
         "type":"Child",
         "properties":{  
            "patient":"6087",
            "batch":"70"
         }
      },
      {  
         "id":136115,
         "type":"Child",
         "properties":{  
            "patient":"6078",
            "batch":"70"
         }
      },
      {  
         "id":136113,
         "type":"Child",
         "properties":{  
            "patient":"6088",
            "batch":"70"
         }
      },
      {  
         "id":135843,
         "type":"Child",
         "properties":{  
            "patient":"6072",
            "batch":"70"
         }
      }
   ],
   "edges":[  
      {  
         "id":0,
         "from":223,
         "to":136525,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136448,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136328,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136305,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136303,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136299,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136261,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136212,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136115,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":136113,
         "properties":{  

         }
      },
      {  
         "id":0,
         "from":223,
         "to":135843,
         "properties":{  

         }
      }
   ]
}

javascript d3.js data-visualization directed-graph force-layout
person Mcestone    schedule 18.01.2016    source источник
comment
к вашему сведению, обновил мой код ответа исправлением для нескольких уровней дочерних узлов   -  person sheilak    schedule 28.03.2016

Ответы (1)


arrow_upward
3
arrow_downward

Техника из связанного ответа можно применить к вашему собственному коду без серьезных изменений, потому что в обоих случаях вы можете получить доступ к свойствам source и target из каждой ссылки, от которых зависит функция click, управляющая свертыванием.

Вот рабочая скрипта, которая вносит следующие изменения в ваш код:

  • переместите код для определения и добавления узлов и ссылок в метод update, чтобы его можно было вызывать несколько раз, как связанный ответ
  • скопируйте код из связанного ответа для инициализации свойств collapsing/collapsed и для фильтрации узлов и ссылок перед повторной инициализацией графа
  • скопируйте метод click для обработки коллапса, но я изменил его, чтобы рекурсивно обрабатывать несколько уровней дочерних узлов (я также изменил ваши тестовые данные, чтобы проверить этот случай)

Код:

var width = 960,
  height = 500;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var force = d3.layout.force()
  .size([width, height])
  //gravity(0.2)
  .linkDistance(height / 6)
  .charge(function(node) {
    if (node.type !== 'ORG') return -2000;
    return -30;
  });

// build the arrow.
svg.append("svg:defs").selectAll("marker")
  .data(["end"]) // Different link/path types can be defined here
  .enter().append("svg:marker") // This section adds in the arrows
  .attr("id", function(d) {
    return d;
  })
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 12)
  .attr("refY", 0)
  .attr("markerWidth", 9)
  .attr("markerHeight", 5)
  .attr("orient", "auto")
  .attr("class", "arrow")
  .append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");

  var json = dataset;

  var edges = [];
  json.edges.forEach(function(e) {
    var sourceNode = json.nodes.filter(function(n) {
        return n.id === e.from;
      })[0],
      targetNode = json.nodes.filter(function(n) {
        return n.id === e.to;
      })[0];

    edges.push({
      source: sourceNode,
      target: targetNode,
      value: e.Value
    });
  });

  for(var i = 0; i < json.nodes.length; i++) {
    json.nodes[i].collapsing = 0;
    json.nodes[i].collapsed = false;
  }

  var link = svg.selectAll(".link");
  var node = svg.selectAll(".node");

  force.on("tick", function() {
    // make sure the nodes do not overlap the arrows
    link.attr("d", function(d) {
      // Total difference in x and y from source to target
      diffX = d.target.x - d.source.x;
      diffY = d.target.y - d.source.y;

      // Length of path from center of source node to center of target node
      pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

      // x and y distances from center to outside edge of target node
      offsetX = (diffX * d.target.radius) / pathLength;
      offsetY = (diffY * d.target.radius) / pathLength;

      return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
    });

    node.attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  });

update();

function update(){
  var nodes = json.nodes.filter(function(d) {
    return d.collapsing == 0;
  });

  var links = edges.filter(function(d) {
    return d.source.collapsing == 0 && d.target.collapsing == 0;
  });

  force
    .nodes(nodes)
    .links(links)
    .start();

  link = link.data(links)

  link.exit().remove();

  link.enter().append("path")
    .attr("class", "link")
    .attr("marker-end", "url(#end)");

  node = node.data(nodes);

  node.exit().remove();

  node.enter().append("g")
    .attr("class", function(d) {
      return "node " + d.type
    });

  node.append("circle")
    .attr("class", "circle")
    .attr("r", function(d) {
      d.radius = 30;
      return d.radius
    }); // return a radius for path to use 

  node.append("text")
    .attr("x", 0)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .attr("class", "text")
    .text(function(d) {
      return d.type
    });

  // On node hover, examine the links to see if their
  // source or target properties match the hovered node.
  node.on('mouseover', function(d) {
    link.attr('class', function(l) {
      if (d === l.source || d === l.target)
        return "link active";
      else
        return "link inactive";
    });
  });

  // Set the stroke width back to normal when mouse leaves the node.
  node.on('mouseout', function() {
    link.attr('class', "link");
  })
  .on('click', click);

  function click(d) {
    if (!d3.event.defaultPrevented) {
      var inc = d.collapsed ? -1 : 1;
      recurse(d);

      function recurse(sourceNode){
        //check if link is from this node, and if so, collapse
        edges.forEach(function(l) {
          if (l.source.id === sourceNode.id){
            l.target.collapsing += inc;
            recurse(l.target);
          }
        });
      }
      d.collapsed = !d.collapsed;
    }      
    update();
  }
}
person sheilak    schedule 26.03.2016
comment
какие-нибудь обновления для d3 v5? Большое спасибо - person Luk Aron; 12.06.2021
comment
@LukAron У меня не скоро будет время посмотреть на это, извините - person sheilak; 12.06.2021