Question

我正在尝试使用Flare.json数据而无需手动调整size属性以获得愉快的结果。理想情况下，我希望大小是嵌套深度的函数，因此下图中层次结构树中的节点将是它们所在节点的百分比。我使用以下示例：http://bl.ocks.org/mbostock/4063530

类似地，引用深度的能力允许动态设置笔划宽度和字体大小。这将解决在通过缩放容器实现缩放功能时发生的问题，而不是通过转换重绘。

enter image description here

以下是flare1000.json，其中所有尺寸都相同。

我想

{  
 "name": "flare",  
 "children": [  
  {  
   "name": "analytics",  
   "children": [  
    {  
     "name": "cluster",
     "children": [  
      {"name": "AgglomerativeCluster" ,"size":  1000},
      {"name": "CommunityStructure" ,"size":  1000},
      {"name": "HierarchicalCluster" ,"size":  1000},
      {"name": "MergeEdge" ,"size":  1000}
     ]  
    }, 
    {  
     "name": "graph",  
     "children": [  
      {"name": "BetweennessCentrality" ,"size":  1000},
      {"name": "LinkDistance" ,"size":  1000},
      {"name": "MaxFlowMinCut" ,"size":  1000},
      {"name": "ShortestPaths" ,"size":  1000},
      {"name": "SpanningTree" ,"size":  1000}
     ]  
    },
    {  
     "name": "optimization",  
     "children": [  
      {"name": "AspectRatioBanker" ,"size":  1000}
     ]  
    }  
   ]  
  } , 
  {  
   "name": "animate",  
   "children": [  
    {"name": "Easing" ,"size":  1000},
    {"name": "FunctionSequence" ,"size":  1000},
    {  
     "name": "interpolate",  
     "children": [  
      {"name": "ArrayInterpolator" ,"size":  1000},
      {"name": "ColorInterpolator" ,"size":  1000},
      {"name": "DateInterpolator" ,"size":  1000},
      {"name": "Interpolator" ,"size":  1000},
      {"name": "MatrixInterpolator" ,"size":  1000},
      {"name": "NumberInterpolator" ,"size":  1000},
      {"name": "ObjectInterpolator" ,"size":  1000},
      {"name": "PointInterpolator" ,"size":  1000},
      {"name": "RectangleInterpolator" ,"size":  1000}
     ]  
    } , 
    {"name": "ISchedulable" ,"size":  1000},
    {"name": "Parallel" ,"size":  1000},
    {"name": "Pause" ,"size":  1000},
    {"name": "Scheduler" ,"size":  1000},
    {"name": "Sequence" ,"size":  1000},
    {"name": "Transition" ,"size":  1000},
    {"name": "Transitioner" ,"size":  1000},
    {"name": "TransitionEvent" ,"size":  1000},
    {"name": "Tween" ,"size":  1000}
   ]  
  } , 
  {  
   "name": "data",  
   "children": [  
    {  
     "name": "converters",  
     "children": [  
      {"name": "Converters" ,"size":  1000},
      {"name": "DelimitedTextConverter" ,"size":  1000},
      {"name": "GraphMLConverter" ,"size":  1000},
      {"name": "IDataConverter" ,"size":  1000},
      {"name": "JSONConverter" ,"size":  1000}
     ]  
    } , 
    {"name": "DataField" ,"size":  1000},
    {"name": "DataSchema" ,"size":  1000},
    {"name": "DataSet" ,"size":  1000},
    {"name": "DataSource" ,"size":  1000},
    {"name": "DataTable" ,"size":  1000},
    {"name": "DataUtil" ,"size":  1000}
   ]  
  }  ,
  {  
   "name": "display" , 
   "children": [  
    {"name": "DirtySprite" ,"size":  1000},
    {"name": "LineSprite" ,"size":  1000},
    {"name": "RectSprite" ,"size":  1000},
    {"name": "TextSprite" ,"size":  1000}
   ]  
  } , 
  {  
   "name": "flex",  
   "children": [  
    {"name": "FlareVis" ,"size":  1000}
   ]  
  },  
  {  
   "name": "physics"  ,
   "children": [  
    {"name": "DragForce" ,"size":  1000},
    {"name": "GravityForce" ,"size":  1000},
    {"name": "IForce" ,"size":  1000},
    {"name": "NBodyForce" ,"size":  1000},
    {"name": "Particle" ,"size":  1000},
    {"name": "Simulation" ,"size":  1000},
    {"name": "Spring" ,"size":  1000},
    {"name": "SpringForce" ,"size":  1000}
   ]  
  } , 
  {  
   "name": "query",  
   "children": [  
    {"name": "AggregateExpression" ,"size":  1000},
    {"name": "And" ,"size":  1000},
    {"name": "Arithmetic" ,"size":  1000},
    {"name": "Average" ,"size":  1000},
    {"name": "BinaryExpression" ,"size":  1000},
    {"name": "Comparison" ,"size":  1000},
    {"name": "CompositeExpression" ,"size":  1000},
    {"name": "Count" ,"size":  1000},
    {"name": "DateUtil" ,"size":  1000},
    {"name": "Distinct" ,"size":  1000},
    {"name": "Expression" ,"size":  1000},
    {"name": "ExpressionIterator" ,"size":  1000},
    {"name": "Fn" ,"size":  1000},
    {"name": "If" ,"size":  1000},
    {"name": "IsA" ,"size":  1000},
    {"name": "Literal" ,"size":  1000},
    {"name": "Match" ,"size":  1000},
    {"name": "Maximum" ,"size":  1000},
    {  
     "name": "methods",  
     "children": [  
      {"name": "add" ,"size":  1000},
      {"name": "and" ,"size":  1000},
      {"name": "average" ,"size":  1000},
      {"name": "count" ,"size":  1000},
      {"name": "distinct" ,"size":  1000},
      {"name": "div" ,"size":  1000},
      {"name": "eq" ,"size":  1000},
      {"name": "fn" ,"size":  1000},
      {"name": "gt" ,"size":  1000},
      {"name": "gte" ,"size":  1000},
      {"name": "iff" ,"size":  1000},
      {"name": "isa" ,"size":  1000},
      {"name": "lt" ,"size":  1000},
      {"name": "Maximum" ,"size":  1000},
    {  
     "name": "methods",  
     "children": [  
      {"name": "add" ,"size":  1000},
      {"name": "and" ,"size":  1000},
      {"name": "average" ,"size":  1000},
      {"name": "count" ,"size":  1000},
      {"name": "distinct" ,"size":  1000},
      {"name": "div" ,"size":  1000},
      {"name": "eq" ,"size":  1000},
      {"name": "fn" ,"size":  1000},
      {"name": "gt" ,"size":  1000},
 {"name": "Maximum" ,"size":  1000},
    {  
     "name": "methods",  
     "children": [  
      {"name": "add" ,"size":  1000},
      {"name": "and" ,"size":  1000},
      {"name": "average" ,"size":  1000},
      {"name": "count" ,"size":  1000},
{"name": "Maximum" ,"size":  1000},
    {  
     "name": "methods" , 
     "children": [  
      {"name": "add" ,"size":  1000},
      {"name": "and" ,"size":  1000},
      {"name": "average" ,"size":  1000},
      {"name": "count" ,"size":  1000},
      {"name": "neq" ,"size":  1000},
      {"name": "not" ,"size":  1000},
      {"name": "or" ,"size":  1000},
      {"name": "add" ,"size":  1000},
      {"name": "and" ,"size":  1000},
      {"name": "average" ,"size":  1000},
      {"name": "count" ,"size":  1000},
      {"name": "neq" ,"size":  1000},
      {"name": "not" ,"size":  1000},
      {"name": "add" ,"size":  1000},
      {"name": "and" ,"size":  1000},
      {"name": "average" ,"size":  1000},
      {"name": "count" ,"size":  1000},
      {"name": "neq" ,"size":  1000},
      {"name": "not" ,"size":  1000},
      {"name": "or" ,"size":  1000},
      {"name": "orderby" ,"size":  1000},
      {"name": "range" ,"size":  1000},
      {"name": "select" ,"size":  1000},
      {"name": "stddev" ,"size":  1000},
      {"name": "sub" ,"size":  1000},
      {"name": "sum" ,"size":  1000},
      {"name": "update" ,"size":  1000},
      {"name": "variance" ,"size":  1000},
      {"name": "where" ,"size":  1000},
      {"name": "or" ,"size":  1000},
      {"name": "orderby" ,"size":  1000},
      {"name": "range" ,"size":  1000},
      {"name": "select" ,"size":  1000},
      {"name": "stddev" ,"size":  1000},
      {"name": "sub" ,"size":  1000},
      {"name": "sum" ,"size":  1000},
      {"name": "update" ,"size":  1000},
      {"name": "variance" ,"size":  1000},
      {"name": "where" ,"size":  1000},
      {"name": "orderby" ,"size":  1000},
      {"name": "range" ,"size":  1000},
      {"name": "select" ,"size":  1000},
      {"name": "stddev" ,"size":  1000},
      {"name": "sub" ,"size":  1000},
      {"name": "sum" ,"size":  1000},
      {"name": "update" ,"size":  1000},
      {"name": "variance" ,"size":  1000},
      {"name": "where" ,"size":  1000},
      {"name": "xor" ,"size":  1000}
     ]  
    } , 
      {"name": "distinct" ,"size":  1000},
      {"name": "div" ,"size":  1000},
      {"name": "eq" ,"size":  1000},
      {"name": "fn" ,"size":  1000},
      {"name": "gt" ,"size":  1000}
     ]  
    } , 
      {"name": "gte" ,"size":  1000},
      {"name": "iff" ,"size":  1000},
      {"name": "isa" ,"size":  1000},
      {"name": "lt" ,"size":  1000},
      {"name": "lte" ,"size":  1000},
      {"name": "max" ,"size":  1000},
      {"name": "min" ,"size":  1000}
     ]  
    } , 
      {"name": "mod" ,"size":  1000},
      {"name": "lte" ,"size":  1000},
      {"name": "max" ,"size":  1000},
      {"name": "min" ,"size":  1000},
      {"name": "mod" ,"size":  1000},
      {"name": "mul" ,"size":  1000},
      {"name": "neq" ,"size":  1000},
      {"name": "not" ,"size":  1000},
      {"name": "or" ,"size":  1000},
      {"name": "orderby" ,"size":  1000},
      {"name": "range" ,"size":  1000},
      {"name": "select" ,"size":  1000},
      {"name": "stddev" ,"size":  1000},
      {"name": "sub" ,"size":  1000},
      {"name": "sum" ,"size":  1000},
      {"name": "update" ,"size":  1000},
      {"name": "variance" ,"size":  1000},
      {"name": "where" ,"size":  1000},
      {"name": "xor" ,"size":  1000},
      {"name": "_" ,"size":  1000}
     ]  
    } , 
    {"name": "Minimum" ,"size":  1000},
    {"name": "Not" ,"size":  1000},
    {"name": "Or" ,"size":  1000},
    {"name": "Query" ,"size":  1000},
    {"name": "Range" ,"size":  1000},
    {"name": "StringUtil" ,"size":  1000},
    {"name": "Sum" ,"size":  1000},
    {"name": "Variable" ,"size":  1000},
    {"name": "Variance" ,"size":  1000},
    {"name": "Xor" ,"size":  1000}
   ]  
  },  
  {  
   "name": "scale",  
   "children": [  
    {"name": "IScaleMap" ,"size":  1000},
    {"name": "LinearScale" ,"size":  1000},
    {"name": "LogScale" ,"size":  1000},
    {"name": "OrdinalScale" ,"size":  1000},
    {"name": "QuantileScale" ,"size":  1000},
    {"name": "QuantitativeScale" ,"size":  1000},
    {"name": "RootScale" ,"size":  1000},
    {"name": "Scale" ,"size":  1000},
    {"name": "ScaleType" ,"size":  1000},
    {"name": "TimeScale" ,"size":  1000}
   ]  
  },  
  {  
   "name": "util" , 
   "children": [  
    {"name": "Arrays" ,"size":  1000},
    {"name": "Colors" ,"size":  1000},
    {"name": "Dates" ,"size":  1000},
    {"name": "Displays" ,"size":  1000},
    {"name": "Filter" ,"size":  1000},
    {"name": "Geometry" ,"size":  1000},
    {  
     "name": "heap",  
     "children": [  
      {"name": "FibonacciHeap" ,"size":  1000},
      {"name": "HeapNode" ,"size":  1000}
     ]  
    } , 
    {"name": "IEvaluable" ,"size":  1000},
    {"name": "IPredicate" ,"size":  1000},
    {"name": "IValueProxy" ,"size":  1000},
    {  
     "name": "math" ,
     "children": [  
      {"name": "DenseMatrix" ,"size":  1000},
      {"name": "IMatrix" ,"size":  1000},
      {"name": "SparseMatrix" ,"size":  1000}
     ]  
    } , 
    {"name": "Maths" ,"size":  1000},
    {"name": "Orientation" ,"size":  1000},
    {  
     "name": "palette" ,
     "children": [  
      {"name": "ColorPalette" ,"size":  1000},
      {"name": "Palette" ,"size":  1000},
      {"name": "ShapePalette" ,"size":  1000},
      {"name": "SizePalette" ,"size":  1000}
     ]  
    } , 
    {"name": "Property" ,"size":  1000},
    {"name": "Shapes" ,"size":  1000},
    {"name": "Sort" ,"size":  1000},
    {"name": "Stats" ,"size":  1000},
    {"name": "Strings" ,"size":  1000}
   ]  
  },  
  {  
   "name": "vis",  
   "children": [  
    {  
     "name": "axis",  
     "children": [  
      {"name": "Axes" ,"size":  1000},
      {"name": "Axis" ,"size":  1000},
      {"name": "AxisGridLine" ,"size":  1000},
      {"name": "AxisLabel" ,"size":  1000},
      {"name": "CartesianAxes" ,"size":  1000}
     ]  
    },  
    {  
     "name": "controls",  
     "children": [  
      {"name": "AnchorControl" ,"size":  1000},
      {"name": "ClickControl" ,"size":  1000},
      {"name": "Control" ,"size":  1000},
      {"name": "ControlList" ,"size":  1000},
      {"name": "DragControl" ,"size":  1000},
      {"name": "ExpandControl" ,"size":  1000},
      {"name": "HoverControl" ,"size":  1000},
      {"name": "IControl" ,"size":  1000},
      {"name": "PanZoomControl" ,"size":  1000},
      {"name": "SelectionControl" ,"size":  1000},
      {"name": "TooltipControl" ,"size":  1000}
     ]  
    } , 
    {  
     "name": "data",  
     "children": [  
      {"name": "Data" ,"size":  1000},
      {"name": "DataList" ,"size":  1000},
      {"name": "DataSprite" ,"size":  1000},
      {"name": "EdgeSprite" ,"size":  1000},
      {"name": "NodeSprite" ,"size":  1000},
      {  
       "name": "render",  
       "children": [  
        {"name": "ArrowType" ,"size":  1000},
        {"name": "EdgeRenderer" ,"size":  1000},
        {"name": "IRenderer" ,"size":  1000},
        {"name": "ShapeRenderer" ,"size":  1000}
       ]  
      },  
      {"name": "ScaleBinding" ,"size":  1000},
      {"name": "Tree" ,"size":  1000},
      {"name": "TreeBuilder" ,"size":  1000}
     ]  
    },  
    {  
     "name": "events",  
     "children": [  
      {"name": "DataEvent" ,"size":  1000},
      {"name": "SelectionEvent" ,"size":  1000},
      {"name": "TooltipEvent" ,"size":  1000},
      {"name": "VisualizationEvent" ,"size":  1000}
     ]  
    } , 
    {  
     "name": "legend" , 
     "children": [  
      {"name": "Legend" ,"size":  1000},
      {"name": "LegendItem" ,"size":  1000},
      {"name": "LegendRange" ,"size":  1000}
     ]  
    },  
    {  
     "name": "operator",  
     "children": [  
      {  
       "name": "distortion",  
       "children": [  
        {"name": "BifocalDistortion" ,"size":  1000},
        {"name": "Distortion" ,"size":  1000},
        {"name": "FisheyeDistortion" ,"size":  1000}
       ]  
      },  
      {  
       "name": "encoder",  
       "children": [  
        {"name": "ColorEncoder" ,"size":  1000},
        {"name": "Encoder" ,"size":  1000},
        {"name": "PropertyEncoder" ,"size":  1000},
        {"name": "ShapeEncoder" ,"size":  1000},
        {"name": "SizeEncoder" ,"size":  1000}
       ]  
      },  
      {  
       "name": "filter",  
       "children": [  
        {"name": "FisheyeTreeFilter" ,"size":  1000},
        {"name": "GraphDistanceFilter" ,"size":  1000},
        {"name": "VisibilityFilter" ,"size":  1000}
       ]  
      },  
      {"name": "IOperator" ,"size":  1000},
      {  
       "name": "label",  
       "children": [  
        {"name": "Labeler" ,"size":  1000},
        {"name": "RadialLabeler" ,"size":  1000},
        {"name": "StackedAreaLabeler" ,"size":  1000}
       ]  
      },  
      {  
       "name": "layout",  
       "children": [  
        {"name": "AxisLayout" ,"size":  1000},
        {"name": "BundledEdgeRouter" ,"size":  1000},
        {"name": "CircleLayout" ,"size":  1000},
        {"name": "CirclePackingLayout" ,"size":  1000},
        {"name": "DendrogramLayout" ,"size":  1000},
        {"name": "ForceDirectedLayout" ,"size":  1000},
        {"name": "IcicleTreeLayout" ,"size":  1000},
        {"name": "IndentedTreeLayout" ,"size":  1000},
        {"name": "Layout" ,"size":  1000},
        {"name": "NodeLinkTreeLayout" ,"size":  1000},
        {"name": "PieLayout" ,"size":  1000},
        {"name": "RadialTreeLayout" ,"size":  1000},
        {"name": "RandomLayout" ,"size":  1000},
        {"name": "StackedAreaLayout" ,"size":  1000},
        {"name": "TreeMapLayout" ,"size":  1000}
       ]  
      },  
      {"name": "Operator" ,"size":  1000},
      {"name": "OperatorList" ,"size":  1000},
      {"name": "OperatorSequence" ,"size":  1000},
      {"name": "OperatorSwitch" ,"size":  1000},
      {"name": "SortOperator" ,"size":  1000}
     ]  
    },  
    {"name": "Visualization" ,"size":  1000}
   ]  
  }  
 ]  
}

Answer 1

我没有在api中找到它的明确引用，但是有一个d.depth方法跟踪根节点的深度。

Answer 2

我一直有类似的问题。具体来说，我正在使用的数据对于具有“大小”属性并没有意义，并且将其写入我可能想要显示的所有不同数据中将不值得我花时间。要解决这个问题，至少你需要查看以下代码：

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

并用任何整数替换d.size。（我把它作为Math.random（）的函数来获得任意大小的变化。）

至于深度，在对API和d3.v3.js进行了一些挖掘后，我认为默认情况下包装布局不包括d.depth方法。它超出了我的编码技能水平，但你可能能够找出如何为它所包含的布局定义深度并使用它，假设你仍然在处理这个项目。祝你好运！

确定嵌套深度以指定节点D3.js的大小

2 个答案: