javascript - 有向图是否仅适用于包含 "source"和 "target"值的文件？

Question

我有一个关于 d3.js 中力导向布局的问题。我试图了解有向图是否仅适用于包含“源”和“目标”值的 JSON 文件？我问这个，因为我正在为力导向图使用层次结构布局，但我找不到任何带有有向图和层次结构布局的示例，所以我尝试理解其他示例并编写自己的示例。

通常，层次结构具有这种形式(没有“源”和“目标”):

  "name": "frank",
  "children": [
    {
      "name": "tim"
    },
    {
      "name": "max",
      "children": [
        {
          "name": "alex"
        },
        {
          "name": "martin"
        },
        .....

基于这个例子:http://bl.ocks.org/jhb/5955887

我想知道，明确如何正确设置箭头的线在哪里(从源到值而不是其他方式)。我复制并粘贴了代码中最重要的部分并删除了一些不重要的部分:

var dataset = {

    nodes: [
    {name: "Adam"},
    {name: "Bob"},
    {name: "Carrie"},
    {name: "Donovan"},
    {name: "Edward"},
 ...
    ],
    edges: [
    {source: 0, target: 1},
    {source: 0, target: 2},
    {source: 0, target: 3},
    {source: 0, target: 4},
    {source: 1, target: 5},
    {source: 2, target: 5},
 .....
    ]
    };


    var svg = d3.select("body").append("svg").attr({"width":w,"height":h});

    var force = d3.layout.force()
        .nodes(dataset.nodes)
        .links(dataset.edges)
        .size([w,h])
        .linkDistance([linkDistance])
        .charge([-500])
        .theta(0.1)
        .gravity(0.05)
        .start();



    var edges = svg.selectAll("line")
      .data(dataset.edges)
      .enter()
      .append("line")
      .attr("id",function(d,i) {return 'edge'+i})
      .attr('marker-end','url(#arrowhead)')
      .style("stroke","#ccc")
      .style("pointer-events", "none");

    var nodes = svg.selectAll("circle")
      .data(dataset.nodes)
      .enter()
      .append("circle")
      .attr({"r":15})
      .style("fill",function(d,i){return colors(i);})
      .call(force.drag)


    var edgepaths = svg.selectAll(".edgepath")
        .data(dataset.edges)
        .enter()
        .append('path')
        .attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
               'class':'edgepath',
               'fill-opacity':0,
               'stroke-opacity':0,
               'fill':'blue',
               'stroke':'red',
               'id':function(d,i) {return 'edgepath'+i}})
        .style("pointer-events", "none");

    svg.append('defs').append('marker')
        .attr({'id':'arrowhead',
               'viewBox':'-0 -5 10 10',
               'refX':25,
               'refY':0,
               //'markerUnits':'strokeWidth',
               'orient':'auto',
               'markerWidth':10,
               'markerHeight':10,
               'xoverflow':'visible'})
        .append('svg:path')
            .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
            .attr('fill', '#ccc')
            .attr('stroke','#ccc');

Answer 1

您可以使用分层数据数组来创建力导向图，但首先您必须修改该数组以填充您的节点和链接数组。

所以，给定这个数据数组:

var data = {
    "name": "Frank",
    "children": [{
        "name": "Tim"
    }, {
        "name": "Max",
        "children": [{
            "name": "Alex"
        }, {
            "name": "Martin"
        }]
    }, {
        "name": "Tom",
        "children": [{
            "name": "Murphy"
        }, {
            "name": "Amanda"
        }]
    }]
};

您可以使用此函数来填充节点:

function flatten(hierarchyArray) {
    var nodes = [],
        i = 0;

    function recurse(node) {
        if (node.children) node.children.forEach(recurse);
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }

    recurse(hierarchyArray);
    return nodes;
};

并填充链接:

links = d3.layout.tree().links(nodes);

这样，您就可以在不显式设置“目标”和“源”的情况下获得力导向图。

查看演示(第一个 console.log 用于节点，第二个用于链接):

var data = {
    "name": "Frank",
    "children": [{
        "name": "Tim"
    }, {
        "name": "Max",
        "children": [{
            "name": "Alex"
        }, {
            "name": "Martin"
        }]
    }, {
        "name": "Tom",
        "children": [{
            "name": "Murphy"
        }, {
            "name": "Amanda"
        }]
    }]
};

var nodes = flatten(data);
var links = d3.layout.tree().links(nodes);

console.log(nodes);
console.log(links);

function flatten(hierarchyArray) {
  var nodes = [], i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }

  recurse(hierarchyArray);
  return nodes;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

(flatten 函数的来源:this bl.ocks from Bostock)