javascript – D3中强制布局的分层边缘捆绑
作者：互联网
我目前有一个Force Layout：
http://bl.ocks.org/mbostock/4062045
所以我的数据只是节点和链接,但我想用相同的数据创建这个Hierarchical Edge Bundling：
http://bl.ocks.org/mbostock/7607999
我遇到了问题,因为我的数据不是分层的.它只是节点和链接.我不确定如何使这项工作,但它必须是可能的.
解决方法:
我认为最好的方法是在应用捆绑布局之前修改您拥有的数据.
具体来说,您应该能够引入一个虚构的根来使您的数据分层.根节点可以是：
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"
]
}
]
标签：javascript,svg,d3-js,force-layout,bundle-layout 来源： https://codeday.me/bug/20190624/1279515.html