D3中的力布局产生的分层边缘捆绑 [英] Hierarchical Edge Bundling from Force Layout in D3

查看：50
本文介绍了D3中的力布局产生的分层边缘捆绑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前有一个部队布局:

).

  [{名称":"flare.analytics.cluster.AgglomerativeCluster"，大小":3938，进口":["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"，大小":3812，进口":["flare.analytics.cluster.HierarchicalCluster"，"flare.animate.Transitioner"，"flare.vis.data.DataList"，"flare.analytics.cluster.MergeEdge"，"flare.util.math.IMatrix"]}，{"name":"flare.analytics.cluster.HierarchicalCluster"，大小":6714，进口":["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"，大小":743，进口":[]}，{"name":"flare.analytics.graph.BetweennessCentrality"，大小":3534，进口":["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"，大小":5731，进口":["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"，大小":7840，进口商品":["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"，大小":5914，进口":["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"，大小":3416，进口":["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"，大小":7074，进口商品":["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"，尺寸":17010，进口":["flare.animate.Transition"]}，{"name":"flare.animate.FunctionSequence"，大小":5842，进口":["flare.util.Maths"，"flare.animate.Transition"，"flare.util.Arrays"，"flare.animate.Sequence"，"flare.animate.Transitioner"]}，{"name":"flare.animate.interpolate.ArrayInterpolator"，大小":1983，进口":["flare.util.Arrays"，"flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.interpolate.ColorInterpolator"，大小":2047，进口":["flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.interpolate.DateInterpolator"，大小":1375，进口":["flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.interpolate.Interpolator"，大小":8746，进口":["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"，大小":2202，进口":["flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.interpolate.NumberInterpolator"，大小":1382，进口":["flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.interpolate.ObjectInterpolator"，大小":1629，进口":["flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.interpolate.PointInterpolator"，大小":1675，进口":["flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.interpolate.RectangleInterpolator"，大小":2042，进口":["flare.animate.interpolate.Interpolator"]}，{"name":"flare.animate.ISchedulable"，大小":1041，进口":["flare.animate.Scheduler"]}，{"name":"flare.animate.Parallel"，大小":5176，进口商品":["flare.animate.Easing"，"flare.animate.Transition"，"flare.util.Arrays"]}，{"name":"flare.animate.Pause"，大小":449，进口商品":["flare.animate.Transition"]}，{"name":"flare.animate.Scheduler"，大小":5593，进口":["flare.animate.ISchedulable"，"flare.animate.Pause"，"flare.animate.Transition"]}，{"name":"flare.animate.Sequence"，大小":5534，进口":["flare.animate.Easing"，"flare.util.Maths"，"flare.animate.Transition"，"flare.util.Arrays"]}，{"name":"flare.animate.Transition"，大小":9201，进口":["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"，大小":19975，进口":["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"，大小":1116，进口":["flare.animate.Transition"]}，{"name":"flare.animate.Tween"，大小":6006，进口商品":["flare.animate.Transitioner"，"flare.animate.Transition"，"flare.animate.interpolate.Interpolator"，"flare.util.Property"]}，{"name":"flare.data.converters.Converters"，大小":721，进口":["flare.data.converters.IDataConverter"，"flare.data.converters.GraphMLConverter"，"flare.data.converters.JSONConverter"，"flare.data.converters.DelimitedTextConverter"]}，{"name":"flare.data.converters.DelimitedTextConverter"，大小":4294，进口":["flare.data.DataSet"，"flare.data.DataUtil"，"flare.data.DataTable"，"flare.data.converters.IDataConverter"，"flare.data.DataSchema"，"flare.data.DataField"]}，{"name":"flare.data.converters.GraphMLConverter"，大小":9800，进口":["flare.data.DataSet"，"flare.data.DataUtil"，"flare.data.DataTable"，"flare.data.converters.IDataConverter"，"flare.data.DataSchema"，"flare.data.DataField"]}，{"name":"flare.data.converters.IDataConverter"，大小":1314，进口":["flare.data.DataSet"，"flare.data.DataSchema"]}，{"name":"flare.data.converters.JSONConverter"，大小":2220，进口":["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"，大小":1759，进口":["flare.data.DataUtil"]}，{"name":"flare.data.DataSchema"，大小":2165，进口":["flare.data.DataField"，"flare.util.Arrays"]}，...{"name":"flare.vis.Visualization"，大小":16540，进口":["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"]}]

I currently have a Force Layout:

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

So my data is simply nodes and links, but I'd like to create this Hierarchical Edge Bundling with the same data:

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

I'm having issues because my data isn't hierarchical. Its just nodes and links. I'm not sure how to make this work, but it must be possible.

解决方案

I believe the best approach would be to modify the data you have before applying bundle layout.

Specifically, you should be able to introduce a fictional root to make your data hierarchical. The root node could be:

a) parent for all nodes in your current data that have at least one child

or

b) parent for all nodes in your current data that do not have a parent.

What is better depends on your case (data/application).

While converting the data, you need to take care of two things on top of that: make sure your original data does not have cycles (that would prevent converting it to hierarchy), and you need to follow data format for bundle layout (for example, see json file 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"
        ]
      }
    ]

这篇关于D3中的力布局产生的分层边缘捆绑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆