概要 实例 介绍 源码

气泡图

源文件:index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="UTF-8">
  4. <svg width="600" height="400" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
  5. <script src="https://d3js.org/d3.v4.min.js"></script>
  6. <script>
  7. var svg = d3.select("svg"),
  8. width = +svg.attr("width"),
  9. height = +svg.attr("height");
  10. var format = d3.format(",d");
  11. var color = d3.scaleOrdinal(d3.schemeCategory20c);
  12. var pack = d3.pack()
  13. .size([width, height])
  14. .padding(1.5);
  15. d3.csv("flare.csv", function(d) {
  16. d.value = +d.value;
  17. if (d.value) return d;
  18. }, function(error, classes) {
  19. if (error) throw error;
  20. var root = d3.hierarchy({children: classes})
  21. .sum(function(d) { return d.value; })
  22. .each(function(d) {
  23. if (id = d.data.id) {
  24. var id, i = id.lastIndexOf(".");
  25. d.id = id;
  26. d.package = id.slice(0, i);
  27. d.class = id.slice(i + 1);
  28. }
  29. });
  30. var node = svg.selectAll(".node")
  31. .data(pack(root).leaves())
  32. .enter().append("g")
  33. .attr("class", "node")
  34. .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  35. node.append("circle")
  36. .attr("id", function(d) { return d.id; })
  37. .attr("r", function(d) { return d.r; })
  38. .style("fill", function(d) { return color(d.package); });
  39. node.append("clipPath")
  40. .attr("id", function(d) { return "clip-" + d.id; })
  41. .append("use")
  42. .attr("xlink:href", function(d) { return "#" + d.id; });
  43. node.append("text")
  44. .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
  45. .selectAll("tspan")
  46. .data(function(d) { return d.class.split(/(?=[A-Z][^A-Z])/g); })
  47. .enter().append("tspan")
  48. .attr("x", 0)
  49. .attr("y", function(d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 10; })
  50. .text(function(d) { return d; });
  51. node.append("title")
  52. .text(function(d) { return d.id + "\n" + format(d.value); });
  53. });
  54. </script>

源文件:flare.csv

  1. id,value
  2. flare,
  3. flare.analytics,
  4. flare.analytics.cluster,
  5. flare.analytics.cluster.AgglomerativeCluster,3938
  6. flare.analytics.cluster.CommunityStructure,3812
  7. flare.analytics.cluster.HierarchicalCluster,6714
  8. flare.analytics.cluster.MergeEdge,743
  9. flare.analytics.graph,
  10. flare.analytics.graph.BetweennessCentrality,3534
  11. flare.analytics.graph.LinkDistance,5731
  12. flare.analytics.graph.MaxFlowMinCut,7840
  13. flare.analytics.graph.ShortestPaths,5914
  14. flare.analytics.graph.SpanningTree,3416
  15. flare.analytics.optimization,
  16. flare.analytics.optimization.AspectRatioBanker,7074
  17. flare.animate,
  18. flare.animate.Easing,17010
  19. flare.animate.FunctionSequence,5842
  20. flare.animate.interpolate,
  21. flare.animate.interpolate.ArrayInterpolator,1983
  22. flare.animate.interpolate.ColorInterpolator,2047
  23. flare.animate.interpolate.DateInterpolator,1375
  24. flare.animate.interpolate.Interpolator,8746
  25. flare.animate.interpolate.MatrixInterpolator,2202
  26. flare.animate.interpolate.NumberInterpolator,1382
  27. flare.animate.interpolate.ObjectInterpolator,1629
  28. flare.animate.interpolate.PointInterpolator,1675
  29. flare.animate.interpolate.RectangleInterpolator,2042
  30. flare.animate.ISchedulable,1041
  31. flare.animate.Parallel,5176
  32. flare.animate.Pause,449
  33. flare.animate.Scheduler,5593
  34. flare.animate.Sequence,5534
  35. flare.animate.Transition,9201
  36. flare.animate.Transitioner,19975
  37. flare.animate.TransitionEvent,1116
  38. flare.animate.Tween,6006
  39. flare.data,
  40. flare.data.converters,
  41. flare.data.converters.Converters,721
  42. flare.data.converters.DelimitedTextConverter,4294
  43. flare.data.converters.GraphMLConverter,9800
  44. flare.data.converters.IDataConverter,1314
  45. flare.data.converters.JSONConverter,2220
  46. flare.data.DataField,1759
  47. flare.data.DataSchema,2165
  48. flare.data.DataSet,586
  49. flare.data.DataSource,3331
  50. flare.data.DataTable,772
  51. flare.data.DataUtil,3322
  52. flare.display,
  53. flare.display.DirtySprite,8833
  54. flare.display.LineSprite,1732
  55. flare.display.RectSprite,3623
  56. flare.display.TextSprite,10066
  57. flare.flex,
  58. flare.flex.FlareVis,4116
  59. flare.physics,
  60. flare.physics.DragForce,1082
  61. flare.physics.GravityForce,1336
  62. flare.physics.IForce,319
  63. flare.physics.NBodyForce,10498
  64. flare.physics.Particle,2822
  65. flare.physics.Simulation,9983
  66. flare.physics.Spring,2213
  67. flare.physics.SpringForce,1681
  68. flare.query,
  69. flare.query.AggregateExpression,1616
  70. flare.query.And,1027
  71. flare.query.Arithmetic,3891
  72. flare.query.Average,891
  73. flare.query.BinaryExpression,2893
  74. flare.query.Comparison,5103
  75. flare.query.CompositeExpression,3677
  76. flare.query.Count,781
  77. flare.query.DateUtil,4141
  78. flare.query.Distinct,933
  79. flare.query.Expression,5130
  80. flare.query.ExpressionIterator,3617
  81. flare.query.Fn,3240
  82. flare.query.If,2732
  83. flare.query.IsA,2039
  84. flare.query.Literal,1214
  85. flare.query.Match,3748
  86. flare.query.Maximum,843
  87. flare.query.methods,
  88. flare.query.methods.add,593
  89. flare.query.methods.and,330
  90. flare.query.methods.average,287
  91. flare.query.methods.count,277
  92. flare.query.methods.distinct,292
  93. flare.query.methods.div,595
  94. flare.query.methods.eq,594
  95. flare.query.methods.fn,460
  96. flare.query.methods.gt,603
  97. flare.query.methods.gte,625
  98. flare.query.methods.iff,748
  99. flare.query.methods.isa,461
  100. flare.query.methods.lt,597
  101. flare.query.methods.lte,619
  102. flare.query.methods.max,283
  103. flare.query.methods.min,283
  104. flare.query.methods.mod,591
  105. flare.query.methods.mul,603
  106. flare.query.methods.neq,599
  107. flare.query.methods.not,386
  108. flare.query.methods.or,323
  109. flare.query.methods.orderby,307
  110. flare.query.methods.range,772
  111. flare.query.methods.select,296
  112. flare.query.methods.stddev,363
  113. flare.query.methods.sub,600
  114. flare.query.methods.sum,280
  115. flare.query.methods.update,307
  116. flare.query.methods.variance,335
  117. flare.query.methods.where,299
  118. flare.query.methods.xor,354
  119. flare.query.methods._,264
  120. flare.query.Minimum,843
  121. flare.query.Not,1554
  122. flare.query.Or,970
  123. flare.query.Query,13896
  124. flare.query.Range,1594
  125. flare.query.StringUtil,4130
  126. flare.query.Sum,791
  127. flare.query.Variable,1124
  128. flare.query.Variance,1876
  129. flare.query.Xor,1101
  130. flare.scale,
  131. flare.scale.IScaleMap,2105
  132. flare.scale.LinearScale,1316
  133. flare.scale.LogScale,3151
  134. flare.scale.OrdinalScale,3770
  135. flare.scale.QuantileScale,2435
  136. flare.scale.QuantitativeScale,4839
  137. flare.scale.RootScale,1756
  138. flare.scale.Scale,4268
  139. flare.scale.ScaleType,1821
  140. flare.scale.TimeScale,5833
  141. flare.util,
  142. flare.util.Arrays,8258
  143. flare.util.Colors,10001
  144. flare.util.Dates,8217
  145. flare.util.Displays,12555
  146. flare.util.Filter,2324
  147. flare.util.Geometry,10993
  148. flare.util.heap,
  149. flare.util.heap.FibonacciHeap,9354
  150. flare.util.heap.HeapNode,1233
  151. flare.util.IEvaluable,335
  152. flare.util.IPredicate,383
  153. flare.util.IValueProxy,874
  154. flare.util.math,
  155. flare.util.math.DenseMatrix,3165
  156. flare.util.math.IMatrix,2815
  157. flare.util.math.SparseMatrix,3366
  158. flare.util.Maths,17705
  159. flare.util.Orientation,1486
  160. flare.util.palette,
  161. flare.util.palette.ColorPalette,6367
  162. flare.util.palette.Palette,1229
  163. flare.util.palette.ShapePalette,2059
  164. flare.util.palette.SizePalette,2291
  165. flare.util.Property,5559
  166. flare.util.Shapes,19118
  167. flare.util.Sort,6887
  168. flare.util.Stats,6557
  169. flare.util.Strings,22026
  170. flare.vis,
  171. flare.vis.axis,
  172. flare.vis.axis.Axes,1302
  173. flare.vis.axis.Axis,24593
  174. flare.vis.axis.AxisGridLine,652
  175. flare.vis.axis.AxisLabel,636
  176. flare.vis.axis.CartesianAxes,6703
  177. flare.vis.controls,
  178. flare.vis.controls.AnchorControl,2138
  179. flare.vis.controls.ClickControl,3824
  180. flare.vis.controls.Control,1353
  181. flare.vis.controls.ControlList,4665
  182. flare.vis.controls.DragControl,2649
  183. flare.vis.controls.ExpandControl,2832
  184. flare.vis.controls.HoverControl,4896
  185. flare.vis.controls.IControl,763
  186. flare.vis.controls.PanZoomControl,5222
  187. flare.vis.controls.SelectionControl,7862
  188. flare.vis.controls.TooltipControl,8435
  189. flare.vis.data,
  190. flare.vis.data.Data,20544
  191. flare.vis.data.DataList,19788
  192. flare.vis.data.DataSprite,10349
  193. flare.vis.data.EdgeSprite,3301
  194. flare.vis.data.NodeSprite,19382
  195. flare.vis.data.render,
  196. flare.vis.data.render.ArrowType,698
  197. flare.vis.data.render.EdgeRenderer,5569
  198. flare.vis.data.render.IRenderer,353
  199. flare.vis.data.render.ShapeRenderer,2247
  200. flare.vis.data.ScaleBinding,11275
  201. flare.vis.data.Tree,7147
  202. flare.vis.data.TreeBuilder,9930
  203. flare.vis.events,
  204. flare.vis.events.DataEvent,2313
  205. flare.vis.events.SelectionEvent,1880
  206. flare.vis.events.TooltipEvent,1701
  207. flare.vis.events.VisualizationEvent,1117
  208. flare.vis.legend,
  209. flare.vis.legend.Legend,20859
  210. flare.vis.legend.LegendItem,4614
  211. flare.vis.legend.LegendRange,10530
  212. flare.vis.operator,
  213. flare.vis.operator.distortion,
  214. flare.vis.operator.distortion.BifocalDistortion,4461
  215. flare.vis.operator.distortion.Distortion,6314
  216. flare.vis.operator.distortion.FisheyeDistortion,3444
  217. flare.vis.operator.encoder,
  218. flare.vis.operator.encoder.ColorEncoder,3179
  219. flare.vis.operator.encoder.Encoder,4060
  220. flare.vis.operator.encoder.PropertyEncoder,4138
  221. flare.vis.operator.encoder.ShapeEncoder,1690
  222. flare.vis.operator.encoder.SizeEncoder,1830
  223. flare.vis.operator.filter,
  224. flare.vis.operator.filter.FisheyeTreeFilter,5219
  225. flare.vis.operator.filter.GraphDistanceFilter,3165
  226. flare.vis.operator.filter.VisibilityFilter,3509
  227. flare.vis.operator.IOperator,1286
  228. flare.vis.operator.label,
  229. flare.vis.operator.label.Labeler,9956
  230. flare.vis.operator.label.RadialLabeler,3899
  231. flare.vis.operator.label.StackedAreaLabeler,3202
  232. flare.vis.operator.layout,
  233. flare.vis.operator.layout.AxisLayout,6725
  234. flare.vis.operator.layout.BundledEdgeRouter,3727
  235. flare.vis.operator.layout.CircleLayout,9317
  236. flare.vis.operator.layout.CirclePackingLayout,12003
  237. flare.vis.operator.layout.DendrogramLayout,4853
  238. flare.vis.operator.layout.ForceDirectedLayout,8411
  239. flare.vis.operator.layout.IcicleTreeLayout,4864
  240. flare.vis.operator.layout.IndentedTreeLayout,3174
  241. flare.vis.operator.layout.Layout,7881
  242. flare.vis.operator.layout.NodeLinkTreeLayout,12870
  243. flare.vis.operator.layout.PieLayout,2728
  244. flare.vis.operator.layout.RadialTreeLayout,12348
  245. flare.vis.operator.layout.RandomLayout,870
  246. flare.vis.operator.layout.StackedAreaLayout,9121
  247. flare.vis.operator.layout.TreeMapLayout,9191
  248. flare.vis.operator.Operator,2490
  249. flare.vis.operator.OperatorList,5248
  250. flare.vis.operator.OperatorSequence,4190
  251. flare.vis.operator.OperatorSwitch,2581
  252. flare.vis.operator.SortOperator,2023
  253. flare.vis.Visualization,16540