我目前有一个强制布局：
http://bl.ocks.org/mbostock/4062045
所以我的数据只是节点和链接，但我想用相同的数据创建这个 Hierarchical Edge Bundling：
http://bl.ocks.org/mbostock/7607999
我遇到了问题，因为我的数据不是分层的。它只是节点和链接。我不知道如何使这项工作，但它必须是可能的。
【问题讨论】：
标签： javascript svg d3.js force-layout bundle-layout
我认为最好的方法是在应用捆绑布局之前修改您拥有的数据。
具体来说，您应该能够引入 虚构的根 来使您的数据分层。根节点可能是：
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"
]
}
]
【讨论】：
分层边缘捆绑要求存在层次结构。它甚至可以是任意的，但没有它就无法创建捆绑效果。捆绑由层次结构确定（具有相同父级的元素将以相同方式捆绑）。
【讨论】：
根据节点的组属性构建外部父节点。整个图由三个层次组成：根、每组的父节点、叶节点（真实节点）。
请查看函数gen_fake_data，希望能帮助你更好地理解。
附：该代码可能无法在 jsfiddle 中运行，但可以在我的本地环境中运行。
【讨论】：