D3中强制布局的分层边缘捆绑

时间：2014-03-21 20:20:01

标签： javascript svg d3.js force-layout bundle-layout

我目前有一个强制布局：

http://bl.ocks.org/mbostock/4062045

所以我的数据只是节点和链接，但我想用相同的数据创建这个Hierarchical Edge Bundling：

http://bl.ocks.org/mbostock/7607999

enter image description here

由于我的数据不是分层的，因此我遇到了问题。它只是节点和链接。我不确定如何使这项工作，但它必须是可能的。

3 个答案:

答案 0 :(得分：2)

分层边缘捆绑要求存在层次结构。它甚至可以是任意的，但没有它就没有办法创建捆绑效果。捆绑由层次结构决定（具有相同父级的元素将以相同的方式捆绑）。

答案 1 :(得分：2)

我认为最好的方法是在应用捆绑布局之前修改您拥有的数据。

具体来说，您应该能够引入 虚构的根 来使您的数据具有层次结构。根节点可以是：

a）当前数据中至少有一个孩子的所有节点的父级

或

b）当前数据中没有父级的所有节点的父级。

什么更好取决于您的情况（数据/应用程序）。

在转换数据时，您需要处理两件事：确保原始数据没有周期（这会阻止将其转换为层次结构），并且您需要遵循数据格式进行包布局（例如，请参阅json文件http://bl.ocks.org/mbostock/raw/1044242/readme-flare-imports.json）。

    [
      {
        "name":"flare.analytics.cluster.AgglomerativeCluster",
        "size":3938,
        "imports":[
          "flare.animate.Transitioner",
          "flare.vis.data.DataList",
          "flare.util.math.IMatrix",
          "flare.analytics.cluster.MergeEdge",
          "flare.analytics.cluster.HierarchicalCluster",
          "flare.vis.data.Data"
        ]
      },
      {
        "name":"flare.analytics.cluster.CommunityStructure",
        "size":3812,
        "imports":[
          "flare.analytics.cluster.HierarchicalCluster",
          "flare.animate.Transitioner",
          "flare.vis.data.DataList",
          "flare.analytics.cluster.MergeEdge",
          "flare.util.math.IMatrix"
        ]
      },
      {
        "name":"flare.analytics.cluster.HierarchicalCluster",
        "size":6714,
        "imports":[
          "flare.vis.data.EdgeSprite",
          "flare.vis.data.NodeSprite",
          "flare.vis.data.DataList",
          "flare.vis.data.Tree",
          "flare.util.Arrays",
          "flare.analytics.cluster.MergeEdge",
          "flare.util.Sort",
          "flare.vis.operator.Operator",
          "flare.util.Property",
          "flare.vis.data.Data"
        ]
      },
      {
        "name":"flare.analytics.cluster.MergeEdge",
        "size":743,
        "imports":[

        ]
      },
      {
        "name":"flare.analytics.graph.BetweennessCentrality",
        "size":3534,
        "imports":[
          "flare.animate.Transitioner",
          "flare.vis.data.NodeSprite",
          "flare.vis.data.DataList",
          "flare.util.Arrays",
          "flare.vis.data.Data",
          "flare.util.Property",
          "flare.vis.operator.Operator"
        ]
      },
      {
        "name":"flare.analytics.graph.LinkDistance",
        "size":5731,
        "imports":[
          "flare.animate.Transitioner",
          "flare.vis.data.NodeSprite",
          "flare.vis.data.EdgeSprite",
          "flare.analytics.graph.ShortestPaths",
          "flare.vis.data.Data",
          "flare.util.Property",
          "flare.vis.operator.Operator"
        ]
      },
      {
        "name":"flare.analytics.graph.MaxFlowMinCut",
        "size":7840,
        "imports":[
          "flare.animate.Transitioner",
          "flare.vis.data.NodeSprite",
          "flare.vis.data.EdgeSprite",
          "flare.vis.data.Data",
          "flare.util.Property",
          "flare.vis.operator.Operator"
        ]
      },
      {
        "name":"flare.analytics.graph.ShortestPaths",
        "size":5914,
        "imports":[
          "flare.vis.data.EdgeSprite",
          "flare.vis.data.NodeSprite",
          "flare.animate.Transitioner",
          "flare.vis.operator.Operator",
          "flare.util.heap.HeapNode",
          "flare.util.heap.FibonacciHeap",
          "flare.util.Property",
          "flare.vis.data.Data"
        ]
      },
      {
        "name":"flare.analytics.graph.SpanningTree",
        "size":3416,
        "imports":[
          "flare.animate.Transitioner",
          "flare.vis.data.NodeSprite",
          "flare.vis.operator.IOperator",
          "flare.vis.Visualization",
          "flare.vis.data.TreeBuilder",
          "flare.vis.operator.Operator"
        ]
      },
      {
        "name":"flare.analytics.optimization.AspectRatioBanker",
        "size":7074,
        "imports":[
          "flare.animate.Transitioner",
          "flare.util.Arrays",
          "flare.vis.data.DataSprite",
          "flare.scale.Scale",
          "flare.vis.axis.CartesianAxes",
          "flare.vis.Visualization",
          "flare.util.Property",
          "flare.vis.operator.Operator"
        ]
      },
      {
        "name":"flare.animate.Easing",
        "size":17010,
        "imports":[
          "flare.animate.Transition"
        ]
      },
      {
        "name":"flare.animate.FunctionSequence",
        "size":5842,
        "imports":[
          "flare.util.Maths",
          "flare.animate.Transition",
          "flare.util.Arrays",
          "flare.animate.Sequence",
          "flare.animate.Transitioner"
        ]
      },
      {
        "name":"flare.animate.interpolate.ArrayInterpolator",
        "size":1983,
        "imports":[
          "flare.util.Arrays",
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.ColorInterpolator",
        "size":2047,
        "imports":[
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.DateInterpolator",
        "size":1375,
        "imports":[
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.Interpolator",
        "size":8746,
        "imports":[
          "flare.animate.interpolate.NumberInterpolator",
          "flare.animate.interpolate.ColorInterpolator",
          "flare.animate.interpolate.PointInterpolator",
          "flare.animate.interpolate.ObjectInterpolator",
          "flare.animate.interpolate.MatrixInterpolator",
          "flare.animate.interpolate.RectangleInterpolator",
          "flare.animate.interpolate.DateInterpolator",
          "flare.util.Property",
          "flare.animate.interpolate.ArrayInterpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.MatrixInterpolator",
        "size":2202,
        "imports":[
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.NumberInterpolator",
        "size":1382,
        "imports":[
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.ObjectInterpolator",
        "size":1629,
        "imports":[
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.PointInterpolator",
        "size":1675,
        "imports":[
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.interpolate.RectangleInterpolator",
        "size":2042,
        "imports":[
          "flare.animate.interpolate.Interpolator"
        ]
      },
      {
        "name":"flare.animate.ISchedulable",
        "size":1041,
        "imports":[
          "flare.animate.Scheduler"
        ]
      },
      {
        "name":"flare.animate.Parallel",
        "size":5176,
        "imports":[
          "flare.animate.Easing",
          "flare.animate.Transition",
          "flare.util.Arrays"
        ]
      },
      {
        "name":"flare.animate.Pause",
        "size":449,
        "imports":[
          "flare.animate.Transition"
        ]
      },
      {
        "name":"flare.animate.Scheduler",
        "size":5593,
        "imports":[
          "flare.animate.ISchedulable",
          "flare.animate.Pause",
          "flare.animate.Transition"
        ]
      },
      {
        "name":"flare.animate.Sequence",
        "size":5534,
        "imports":[
          "flare.animate.Easing",
          "flare.util.Maths",
          "flare.animate.Transition",
          "flare.util.Arrays"
        ]
      },
      {
        "name":"flare.animate.Transition",
        "size":9201,
        "imports":[
          "flare.animate.Transitioner",
          "flare.animate.TransitionEvent",
          "flare.animate.Scheduler",
          "flare.animate.Pause",
          "flare.animate.Parallel",
          "flare.animate.Easing",
          "flare.animate.Sequence",
          "flare.animate.ISchedulable",
          "flare.util.Maths",
          "flare.animate.Tween"
        ]
      },
      {
        "name":"flare.animate.Transitioner",
        "size":19975,
        "imports":[
          "flare.util.IValueProxy",
          "flare.animate.Parallel",
          "flare.animate.Easing",
          "flare.animate.Sequence",
          "flare.animate.Transition",
          "flare.animate.Tween",
          "flare.util.Property"
        ]
      },
      {
        "name":"flare.animate.TransitionEvent",
        "size":1116,
        "imports":[
          "flare.animate.Transition"
        ]
      },
      {
        "name":"flare.animate.Tween",
        "size":6006,
        "imports":[
          "flare.animate.Transitioner",
          "flare.animate.Transition",
          "flare.animate.interpolate.Interpolator",
          "flare.util.Property"
        ]
      },
      {
        "name":"flare.data.converters.Converters",
        "size":721,
        "imports":[
          "flare.data.converters.IDataConverter",
          "flare.data.converters.GraphMLConverter",
          "flare.data.converters.JSONConverter",
          "flare.data.converters.DelimitedTextConverter"
        ]
      },
      {
        "name":"flare.data.converters.DelimitedTextConverter",
        "size":4294,
        "imports":[
          "flare.data.DataSet",
          "flare.data.DataUtil",
          "flare.data.DataTable",
          "flare.data.converters.IDataConverter",
          "flare.data.DataSchema",
          "flare.data.DataField"
        ]
      },
      {
        "name":"flare.data.converters.GraphMLConverter",
        "size":9800,
        "imports":[
          "flare.data.DataSet",
          "flare.data.DataUtil",
          "flare.data.DataTable",
          "flare.data.converters.IDataConverter",
          "flare.data.DataSchema",
          "flare.data.DataField"
        ]
      },
      {
        "name":"flare.data.converters.IDataConverter",
        "size":1314,
        "imports":[
          "flare.data.DataSet",
          "flare.data.DataSchema"
        ]
      },
      {
        "name":"flare.data.converters.JSONConverter",
        "size":2220,
        "imports":[
          "flare.data.DataSet",
          "flare.data.DataUtil",
          "flare.data.DataTable",
          "flare.data.converters.IDataConverter",
          "flare.data.DataSchema",
          "flare.data.DataField",
          "flare.util.Property"
        ]
      },
      {
        "name":"flare.data.DataField",
        "size":1759,
        "imports":[
          "flare.data.DataUtil"
        ]
      },
      {
        "name":"flare.data.DataSchema",
        "size":2165,
        "imports":[
          "flare.data.DataField",
          "flare.util.Arrays"
        ]
      },
.
.
.
      {
        "name":"flare.vis.Visualization",
        "size":16540,
        "imports":[
          "flare.animate.Transitioner",
          "flare.vis.operator.IOperator",
          "flare.animate.Scheduler",
          "flare.vis.events.VisualizationEvent",
          "flare.vis.data.Tree",
          "flare.vis.events.DataEvent",
          "flare.vis.axis.Axes",
          "flare.vis.axis.CartesianAxes",
          "flare.util.Displays",
          "flare.vis.operator.OperatorList",
          "flare.vis.controls.ControlList",
          "flare.animate.ISchedulable",
          "flare.vis.data.Data"
        ]
      }
    ]

答案 2 :(得分：0)

根据节点的组属性构建外部父节点。整个图包含三个级别：根，每个组的父节点，叶节点（真实节点）。

请查看函数gen_fake_data，这有助于您更好地理解。

P.S。代码可能无法在jsfiddle上运行，但可以在我的本地环境中运行。

https://jsfiddle.net/6rcc3n2e/

results of my randomly generated data

相关问题
最新问题