问题描述
我根据Observable中Mike Bostock的示例创建了以下代码(我知道这与原始d3/javascript不同)
任何想法都受到热烈欢迎...
index.html
< html lang ="en">< head><元字符集="UTF-8"><元名称=视口"内容＝宽度＝设备宽度，初始比例＝ 1.0."< link rel ="stylesheet"type ="text/css"href ="//fonts.googleapis.com/css?family=Open+Sans"/>< script src =" https://d3js.org/d3.v6.js"</script>< link rel =快捷方式图标"href ="#">< title>径向树状图</title></head>< body>< div id ="vis"></div>< script src ='script.js'></script></body></html> script.js
功能表(birdDataSet){const root = tree(d3.hierarchy(birdDataSet).sort((a，b)=> d3.ascending(a.data.name，b.data.name))));svg.append("g").attr(填充"，无").attr("stroke"，#555").attr(笔画不透明度"，0.4).attr("stroke-width"，1.5).selectAll(路径").data(root.links()).join(路径").attr("d"，d3.linkRadial().angle(d => d.x).radius(d => d.y));svg.append("g").selectAll(圆圈").data(root.descendants()).join(圆").attr("transform"，d =>`rotation($ {d.x * 180/Math.PI-90})翻译($ {d.y}，0)`).attr(填充"，d => d.children?#555":#999").attr("r"，2.5)；svg.append("g").attr(字体家族"，"sans-serif").attr("font-size"，10).attr("stroke-linejoin"，"round").attr("stroke-width"，3).selectAll(文本").data(root.descendants()).join(文字").attr("transform"，d =>`rotation($ {d.x * 180/Math.PI-90})翻译($ {d.y}，0)rotation($ {d.x> = Math.PI?180:0})`).attr("dy"，"0.31em").attr("x"，d => d.x< Math.PI ===！d.children?6:-6).attr(文本锚"，d => d.x< Math.PI ===！d.children?开始":结束").text(d => d.data.name).clone(true).lower().attr(笔画"，白色")；//返回svg.attr("viewBox"，autoBox).node();}函数autoBox(){document.body.appendChild(this);const {x，y，width，height} = this.getBBox();document.body.removeChild(this);返回[x，y，宽度，高度];}宽度= 975半径=宽度/2树= d3.cluster().size([2 * Math.PI，半径-100])d3.json("data/flare-2.json").then(function(data){console.log(图表(数据));}).catch(function(error){console.warn(错误);}); flare-2.json
可以从以下位置下载 这是一种快速重构，它消除了 ObservableHQ 的疯狂现象，并将其移至简单的HTML/JavaScript页面.您缺少的部分是这样的: 这将调整SVG的大小，然后将树状图移动到SVG的中心. 运行代码: I have created the code below based on Mike Bostock's example in Observable (which I know is not the same as raw d3/ javascript) https://observablehq.com/@d3/radial-dendrogram However, it: Any ideas warmly welcomed... index.html script.js flare-2.json Here's a quick refactor that removes the ObservableHQ craziness and moves it to a simple HTML/JavaScript page. The part you are missing is something like this: This sizes the SVG and then moves the dendogram to the center of the SVG. Running code: 这篇关于D3径向树状图仅显示部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
const svg = d3.select('svg').attr('width'，width).attr('身高'，身高).append('g').attr('transform'，'translate('+ width/2 +'，'+ height/2 +')');
<！DOCTYPE html>< html>< head>< script src ="https://d3js.org/d3.v6.min.js"></script></head>< body>< svg></svg>< script>var data = {名称:'flare'，孩子们: [{名称:'analytics'，孩子们: [{名称:"cluster"，孩子们: [{名称:'AgglomerativeCluster'，值:3938}，{name:'CommunityStructure'，value:3812}，{名称:"HierarchicalCluster"，值:6714}，{name:'MergeEdge'，value:743}，]，}，{名称:"graph"，孩子们: [{name:'BetweennessCentrality'，值:3534}，{name:'LinkDistance'，value:5731}，{名称:'MaxFlowMinCut'，值:7840}，{名称:"ShortestPaths"，值:5914}，{name:'SpanningTree'，value:3416}，]，}，{名称:优化"，子代:[{名称:'AspectRatioBanker'，值:7074}]，}，]，}，{名称:"animate"，孩子们: [{name:'Easing'，value:17010}，{name:'FunctionSequence'，value:5842}，{名称:"interpolate"，孩子们: [{name:'ArrayInterpolator'，value:1983}，{名称:'ColorInterpolator'，值:2047}，{name:'DateInterpolator'，value:1375}，{name:'Interpolator'，value:8746}，{名称:'MatrixInterpolator'，值:2202}，{name:'NumberInterpolator'，value:1382}，{name:'ObjectInterpolator'，value:1629}，{name:'PointInterpolator'，value:1675}，{name:'RectangleInterpolator'，value:2042}，]，}，{name:'ISchedulable'，value:1041}，{name:'Parallel'，value:5176}，{name:'Pause'，value:449}，{name:'Scheduler'，value:5593}，{name:'Sequence'，value:5534}，{name:'Transition'，value:9201}，{name:'Transitioner'，value:19975}，{名称:"TransitionEvent"，值:1116}，{name:'Tween'，value:6006}，]，}，{名称:数据"，孩子们: [{名称:转换器"，孩子们: [{name:'Converters'，value:721}，{名称:'DelimitedTextConverter'，值:4294}，{名称:'GraphMLConverter'，值:9800}，{name:'IDataConverter'，value:1314}，{name:'JSONConverter'，value:2220}，]，}，{name:'DataField'，value:1759}，{name:'DataSchema'，value:2165}，{name:'DataSet'，value:586}，{name:'DataSource'，value:3331}，{name:'DataTable'，value:772}，{name:'DataUtil'，value:3322}，]，}，{名称:"display"，孩子们: [{name:'DirtySprite'，value:8833}，{name:'LineSprite'，value:1732}，{name:'RectSprite'，value:3623}，{name:'TextSprite'，value:10066}，]，}，{名称:"flex"，子代:[{名称:'FlareVis'，值:4116}]，}，{名称:物理学"，孩子们: [{name:'DragForce'，value:1082}，{名称:'GravityForce'，值:1336}，{name:'IForce'，value:319}，{名称:'NBodyForce'，值:10498}，{name:'Particle'，value:2822}，{name:'Simulation'，value:9983}，{name:'Spring'，value:2213}，{name:'SpringForce'，value:1681}，]，}，{名称:"query"，孩子们: [{名称:'AggregateExpression'，值:1616}，{name:'And'，value:1027}，{name:'Arithmetic'，value:3891}，{name:'Average'，value:891}，{name:'BinaryExpression'，value:2893}，{name:'Comparison'，value:5103}，{名称:'CompositeExpression'，值:3677}，{name:'Count'，value:781}，{name:'DateUtil'，value:4141}，{name:'Distinct'，value:933}，{name:'Expression'，value:5130}，{名称:'ExpressionIterator'，值:3617}，{name:'Fn'，value:3240}，{name:'If'，value:2732}，{name:'IsA'，value:2039}，{name:'Literal'，value:1214}，{name:'Match'，value:3748}，{name:'Maximum'，value:843}，{名称:方法"，孩子们: [{name:'add'，value:593}，{name:'and'，value:330}，{name:'average'，value:287}，{name:'count'，value:277}，{name:'distinct'，value:292}，{name:'div'，value:595}，{name:'eq'，value:594}，{name:'fn'，value:460}，{name:'gt'，value:603}，{name:'gte'，value:625}，{name:'iff'，value:748}，{名称:'isa'，值:461}，{name:'lt'，value:597}，{name:'lte'，value:619}，{name:'max'，value:283}，{name:'min'，value:283}，{name:'mod'，value:591}，{name:'mul'，value:603}，{name:'neq'，value:599}，{name:'not'，value:386}，{name:'or'，value:323}，{name:'orderby'，value:307}，{name:'range'，value:772}，{name:'select'，value:296}，{name:'stddev'，value:363}，{name:'sub'，value:600}，{name:'sum'，value:280}，{name:'update'，value:307}，{name:'variance'，value:335}，{name:'where'，value:299}，{name:'xor'，value:354}，{名称:"_"，值:264}，]，}，{name:'Minimum'，value:843}，{name:'Not'，value:1554}，{name:'Or'，value:970}，{name:'Query'，value:13896}，{name:'Range'，value:1594}，{名称:'StringUtil'，值:4130}，{name:'Sum'，value:791}，{name:'Variable'，value:1124}，{name:'Variance'，value:1876}，{name:'Xor'，value:1101}，]，}，{名称:'scale'，孩子们: [{name:'IScaleMap'，value:2105}，{name:'LinearScale'，value:1316}，{name:'LogScale'，value:3151}，{name:'OrdinalScale'，value:3770}，{name:'QuantileScale'，value:2435}，{名称:'QuantitativeScale'，值:4839}，{name:'RootScale'，value:1756}，{name:'Scale'，value:4268}，{name:'ScaleType'，value:1821}，{name:'TimeScale'，value:5833}，]，}，{名称:"util"，孩子们: [{name:'Arrays'，value:8258}，{name:'Colors'，value:10001}，{name:'Dates'，value:8217}，{name:'Displays'，value:12555}，{name:'Filter'，value:2324}，{name:'Geometry'，value:10993}，{名称:堆"，孩子们: [{名称:'FibonacciHeap'，值:9354}，{name:'HeapNode'，value:1233}，]，}，{name:'IEvaluable'，value:335}，{名称:"IPredicate"，值:383}，{name:'IValueProxy'，value:874}，{名称:"math"，孩子们: [{name:'DenseMatrix'，value:3165}，{name:'IMatrix'，value:2815}，{name:'SparseMatrix'，value:3366}，]，}，{name:'Maths'，value:17705}，{name:'Orientation'，value:1486}，{名称:"palette"，孩子们: [{name:'ColorPalette'，value:6367}，{name:'Palette'，value:1229}，{名称:"ShapePalette"，值:2059}，{name:'SizePalette'，value:2291}，]，}，{name:'Property'，value:5559}，{name:'Shapes'，value:19118}，{name:'Sort'，value:6887}，{name:'Stats'，value:6557}，{name:'Strings'，value:22026}，]，}，{名称:"vis"，孩子们: [{名称:"axis"，孩子们: [{name:'Axes'，value:1302}，{name:'Axis'，value:24593}，{name:'AxisGridLine'，value:652}，{名称:"AxisLabel"，值:636}，{name:'CartesianAxes'，value:6703}，]，}，{名称:"controls"，孩子们: [{name:'AnchorControl'，value:2138}，{名称:'ClickControl'，值:3824}，{name:'Control'，value:1353}，{name:'ControlList'，value:4665}，{name:'DragControl'，value:2649}，{name:'ExpandControl'，value:2832}，{name:'HoverControl'，value:4896}，{name:'IControl'，value:763}，{name:'PanZoomControl'，value:5222}，{name:'SelectionControl'，value:7862}，{name:'TooltipControl'，value:8435}，]，}，{名称:数据"，孩子们: [{name:'Data'，value:20544}，{name:'DataList'，value:19788}，{name:'DataSprite'，value:10349}，{name:'EdgeSprite'，value:3301}，{名称:'NodeSprite'，值:19382}，{名称:"render"，孩子们: [{name:'ArrowType'，value:698}，{name:'EdgeRenderer'，value:5569}，{name:'IRenderer'，value:353}，{名称:"ShapeRenderer"，值:2247}，]，}，{name:'ScaleBinding'，value:11275}，{name:'Tree'，value:7147}，{名称:"TreeBuilder"，值:9930}，]，}，{名称:事件"，孩子们: [{name:'DataEvent'，value:2313}，{名称:"SelectionEvent"，值:1880}，{名称:"TooltipEvent"，值:1701}，{名称:"VisualizationEvent"，值:1117}，]，}，{名称:传奇"，孩子们: [{name:'Legend'，value:20859}，{name:'LegendItem'，value:4614}，{name:'LegendRange'，value:10530}，]，}，{名称:操作员"，孩子们: [{名称:失真"，孩子们: [{名称:'BifocalDistortion'，值:4461}，{name:'Distortion'，value:6314}，{名称:"FisheyeDistortion"，值:3444}，]，}，{名称:编码器"，孩子们: [{name:'ColorEncoder'，value:3179}，{名称:编码器"，值:4060}，{名称:"PropertyEncoder"，值:4138}，{名称:"ShapeEncoder"，值:1690}，{名称:'SizeEncoder'，值:1830}，]，}，{名称:"filter"，孩子们: [{name:'FisheyeTreeFilter'，value:5219}，{名称:'GraphDistanceFilter'，值:3165}，{name:'VisibilityFilter'，value:3509}，]，}，{name:'IOperator'，value:1286}，{名称:"label"，孩子们: [{name:'Labeler'，value:9956}，{name:'RadialLabeler'，value:3899}，{名称:'StackedAreaLabeler'，值:3202}，]，}，{名称:"layout"，孩子们: [{name:'AxisLayout'，value:6725}，{名称:'BundledEdgeRouter'，值:3727}，{name:'CircleLayout'，value:9317}，{name:'CirclePackingLayout'，value:12003}，{name:'DendrogramLayout'，value:4853}，{名称:"ForceDirectedLayout"，值:8411}，{名称:'IcicleTreeLayout'，值:4864}，{名称:'IndentedTreeLayout'，值:3174}，{name:'Layout'，value:7881}，{名称:"NodeLinkTreeLayout"，值:12870}，{name:'PieLayout'，value:2728}，{name:'RadialTreeLayout'，value:12348}，{name:'RandomLayout'，value:870}，{name:'StackedAreaLayout'，value:9121}，{name:'TreeMapLayout'，value:9191}，]，}，{name:'Operator'，value:2490}，{name:'OperatorList'，value:5248}，{名称:'OperatorSequence'，值:4190}，{name:'OperatorSwitch'，value:2581}，{name:'SortOperator'，value:2023}，]，}，{name:'Visualization'，value:16540}，]，}，]，};const width = 750，高度= 750，半径=宽度/2;const tree = d3.cluster().size([2 * Math.PI，radius-100]);const root = tree(3天.hierarchy(数据).sort((a，b)=> d3.ascending(a.data.name，b.data.name)));const svg = d3.select('svg').attr('width'，width).attr('身高'，身高).append('g').attr('transform'，'translate('+ width/2 +'，'+ height/2 +')');svg.append('g').attr('fill'，'none').attr('stroke'，'#555').attr('stroke-opacity'，0.4).attr('stroke-width'，1.5).selectAll('路径').data(root.links()).join('路径').attr('d'，3天.linkRadial().angle((d)=> d.x).radius((d)=> d.y));svg.append('g').selectAll('circle').data(root.descendants()).join('circle').attr('转换'，(d)=>`rotation($ {(d.x * 180)/Math.PI-90})翻译($ {d.y}，0)`).attr('fill'，(d)=>(d.children?'#555':'#999')).attr('r'，2.5);svg.append('g').attr('font-family'，'sans-serif').attr('font-size'，10).attr('stroke-linejoin'，'round').attr('stroke-width'，3).selectAll('文字').data(root.descendants()).join('文字').attr('转换'，(d)=>`rotation($ {(d.x * 180)/Math.PI-90})翻译($ {d.y}，0)rotation($ {d.x> = Math.PI?180:0})`).attr('dy'，'0.31em').attr('x'，(d)=>(d.x< Math.PI ===！d.children?6:-6)).attr('text-anchor'，(d)=>d ＜xMath.PI ===！d.children?'开始':'结束').text((d)=> d.data.name).clone(真).降低().attr('stroke'，'white');</script></body></html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://d3js.org/d3.v6.js"></script>
<link rel="shortcut icon" href="#">
<title>Radial Dendrogram</title>
</head>
<body>
<div id="vis">
</div>
<script src = 'script.js'></script>
</body>
</html>
function chart(birdDataSet) {
const root = tree(d3.hierarchy(birdDataSet)
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
svg.append("g")
.selectAll("circle")
.data(root.descendants())
.join("circle")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
`)
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("text")
.data(root.descendants())
.join("text")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
rotate(${d.x >= Math.PI ? 180 : 0})
`)
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
.text(d => d.data.name)
.clone(true).lower()
.attr("stroke", "white");
//return svg.attr("viewBox", autoBox).node();
}
function autoBox() {
document.body.appendChild(this);
const {x, y, width, height} = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
width = 975
radius = width / 2
tree = d3.cluster().size([2 * Math.PI, radius - 100])
d3.json("data/flare-2.json")
.then(function(data) {
console.log(chart(data));
})
.catch(function(error) {
console.warn(error);
});
const svg = d3
.select('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<svg></svg>
<script>
var data = {
name: 'flare',
children: [
{
name: 'analytics',
children: [
{
name: 'cluster',
children: [
{ name: 'AgglomerativeCluster', value: 3938 },
{ name: 'CommunityStructure', value: 3812 },
{ name: 'HierarchicalCluster', value: 6714 },
{ name: 'MergeEdge', value: 743 },
],
},
{
name: 'graph',
children: [
{ name: 'BetweennessCentrality', value: 3534 },
{ name: 'LinkDistance', value: 5731 },
{ name: 'MaxFlowMinCut', value: 7840 },
{ name: 'ShortestPaths', value: 5914 },
{ name: 'SpanningTree', value: 3416 },
],
},
{
name: 'optimization',
children: [{ name: 'AspectRatioBanker', value: 7074 }],
},
],
},
{
name: 'animate',
children: [
{ name: 'Easing', value: 17010 },
{ name: 'FunctionSequence', value: 5842 },
{
name: 'interpolate',
children: [
{ name: 'ArrayInterpolator', value: 1983 },
{ name: 'ColorInterpolator', value: 2047 },
{ name: 'DateInterpolator', value: 1375 },
{ name: 'Interpolator', value: 8746 },
{ name: 'MatrixInterpolator', value: 2202 },
{ name: 'NumberInterpolator', value: 1382 },
{ name: 'ObjectInterpolator', value: 1629 },
{ name: 'PointInterpolator', value: 1675 },
{ name: 'RectangleInterpolator', value: 2042 },
],
},
{ name: 'ISchedulable', value: 1041 },
{ name: 'Parallel', value: 5176 },
{ name: 'Pause', value: 449 },
{ name: 'Scheduler', value: 5593 },
{ name: 'Sequence', value: 5534 },
{ name: 'Transition', value: 9201 },
{ name: 'Transitioner', value: 19975 },
{ name: 'TransitionEvent', value: 1116 },
{ name: 'Tween', value: 6006 },
],
},
{
name: 'data',
children: [
{
name: 'converters',
children: [
{ name: 'Converters', value: 721 },
{ name: 'DelimitedTextConverter', value: 4294 },
{ name: 'GraphMLConverter', value: 9800 },
{ name: 'IDataConverter', value: 1314 },
{ name: 'JSONConverter', value: 2220 },
],
},
{ name: 'DataField', value: 1759 },
{ name: 'DataSchema', value: 2165 },
{ name: 'DataSet', value: 586 },
{ name: 'DataSource', value: 3331 },
{ name: 'DataTable', value: 772 },
{ name: 'DataUtil', value: 3322 },
],
},
{
name: 'display',
children: [
{ name: 'DirtySprite', value: 8833 },
{ name: 'LineSprite', value: 1732 },
{ name: 'RectSprite', value: 3623 },
{ name: 'TextSprite', value: 10066 },
],
},
{
name: 'flex',
children: [{ name: 'FlareVis', value: 4116 }],
},
{
name: 'physics',
children: [
{ name: 'DragForce', value: 1082 },
{ name: 'GravityForce', value: 1336 },
{ name: 'IForce', value: 319 },
{ name: 'NBodyForce', value: 10498 },
{ name: 'Particle', value: 2822 },
{ name: 'Simulation', value: 9983 },
{ name: 'Spring', value: 2213 },
{ name: 'SpringForce', value: 1681 },
],
},
{
name: 'query',
children: [
{ name: 'AggregateExpression', value: 1616 },
{ name: 'And', value: 1027 },
{ name: 'Arithmetic', value: 3891 },
{ name: 'Average', value: 891 },
{ name: 'BinaryExpression', value: 2893 },
{ name: 'Comparison', value: 5103 },
{ name: 'CompositeExpression', value: 3677 },
{ name: 'Count', value: 781 },
{ name: 'DateUtil', value: 4141 },
{ name: 'Distinct', value: 933 },
{ name: 'Expression', value: 5130 },
{ name: 'ExpressionIterator', value: 3617 },
{ name: 'Fn', value: 3240 },
{ name: 'If', value: 2732 },
{ name: 'IsA', value: 2039 },
{ name: 'Literal', value: 1214 },
{ name: 'Match', value: 3748 },
{ name: 'Maximum', value: 843 },
{
name: 'methods',
children: [
{ name: 'add', value: 593 },
{ name: 'and', value: 330 },
{ name: 'average', value: 287 },
{ name: 'count', value: 277 },
{ name: 'distinct', value: 292 },
{ name: 'div', value: 595 },
{ name: 'eq', value: 594 },
{ name: 'fn', value: 460 },
{ name: 'gt', value: 603 },
{ name: 'gte', value: 625 },
{ name: 'iff', value: 748 },
{ name: 'isa', value: 461 },
{ name: 'lt', value: 597 },
{ name: 'lte', value: 619 },
{ name: 'max', value: 283 },
{ name: 'min', value: 283 },
{ name: 'mod', value: 591 },
{ name: 'mul', value: 603 },
{ name: 'neq', value: 599 },
{ name: 'not', value: 386 },
{ name: 'or', value: 323 },
{ name: 'orderby', value: 307 },
{ name: 'range', value: 772 },
{ name: 'select', value: 296 },
{ name: 'stddev', value: 363 },
{ name: 'sub', value: 600 },
{ name: 'sum', value: 280 },
{ name: 'update', value: 307 },
{ name: 'variance', value: 335 },
{ name: 'where', value: 299 },
{ name: 'xor', value: 354 },
{ name: '_', value: 264 },
],
},
{ name: 'Minimum', value: 843 },
{ name: 'Not', value: 1554 },
{ name: 'Or', value: 970 },
{ name: 'Query', value: 13896 },
{ name: 'Range', value: 1594 },
{ name: 'StringUtil', value: 4130 },
{ name: 'Sum', value: 791 },
{ name: 'Variable', value: 1124 },
{ name: 'Variance', value: 1876 },
{ name: 'Xor', value: 1101 },
],
},
{
name: 'scale',
children: [
{ name: 'IScaleMap', value: 2105 },
{ name: 'LinearScale', value: 1316 },
{ name: 'LogScale', value: 3151 },
{ name: 'OrdinalScale', value: 3770 },
{ name: 'QuantileScale', value: 2435 },
{ name: 'QuantitativeScale', value: 4839 },
{ name: 'RootScale', value: 1756 },
{ name: 'Scale', value: 4268 },
{ name: 'ScaleType', value: 1821 },
{ name: 'TimeScale', value: 5833 },
],
},
{
name: 'util',
children: [
{ name: 'Arrays', value: 8258 },
{ name: 'Colors', value: 10001 },
{ name: 'Dates', value: 8217 },
{ name: 'Displays', value: 12555 },
{ name: 'Filter', value: 2324 },
{ name: 'Geometry', value: 10993 },
{
name: 'heap',
children: [
{ name: 'FibonacciHeap', value: 9354 },
{ name: 'HeapNode', value: 1233 },
],
},
{ name: 'IEvaluable', value: 335 },
{ name: 'IPredicate', value: 383 },
{ name: 'IValueProxy', value: 874 },
{
name: 'math',
children: [
{ name: 'DenseMatrix', value: 3165 },
{ name: 'IMatrix', value: 2815 },
{ name: 'SparseMatrix', value: 3366 },
],
},
{ name: 'Maths', value: 17705 },
{ name: 'Orientation', value: 1486 },
{
name: 'palette',
children: [
{ name: 'ColorPalette', value: 6367 },
{ name: 'Palette', value: 1229 },
{ name: 'ShapePalette', value: 2059 },
{ name: 'SizePalette', value: 2291 },
],
},
{ name: 'Property', value: 5559 },
{ name: 'Shapes', value: 19118 },
{ name: 'Sort', value: 6887 },
{ name: 'Stats', value: 6557 },
{ name: 'Strings', value: 22026 },
],
},
{
name: 'vis',
children: [
{
name: 'axis',
children: [
{ name: 'Axes', value: 1302 },
{ name: 'Axis', value: 24593 },
{ name: 'AxisGridLine', value: 652 },
{ name: 'AxisLabel', value: 636 },
{ name: 'CartesianAxes', value: 6703 },
],
},
{
name: 'controls',
children: [
{ name: 'AnchorControl', value: 2138 },
{ name: 'ClickControl', value: 3824 },
{ name: 'Control', value: 1353 },
{ name: 'ControlList', value: 4665 },
{ name: 'DragControl', value: 2649 },
{ name: 'ExpandControl', value: 2832 },
{ name: 'HoverControl', value: 4896 },
{ name: 'IControl', value: 763 },
{ name: 'PanZoomControl', value: 5222 },
{ name: 'SelectionControl', value: 7862 },
{ name: 'TooltipControl', value: 8435 },
],
},
{
name: 'data',
children: [
{ name: 'Data', value: 20544 },
{ name: 'DataList', value: 19788 },
{ name: 'DataSprite', value: 10349 },
{ name: 'EdgeSprite', value: 3301 },
{ name: 'NodeSprite', value: 19382 },
{
name: 'render',
children: [
{ name: 'ArrowType', value: 698 },
{ name: 'EdgeRenderer', value: 5569 },
{ name: 'IRenderer', value: 353 },
{ name: 'ShapeRenderer', value: 2247 },
],
},
{ name: 'ScaleBinding', value: 11275 },
{ name: 'Tree', value: 7147 },
{ name: 'TreeBuilder', value: 9930 },
],
},
{
name: 'events',
children: [
{ name: 'DataEvent', value: 2313 },
{ name: 'SelectionEvent', value: 1880 },
{ name: 'TooltipEvent', value: 1701 },
{ name: 'VisualizationEvent', value: 1117 },
],
},
{
name: 'legend',
children: [
{ name: 'Legend', value: 20859 },
{ name: 'LegendItem', value: 4614 },
{ name: 'LegendRange', value: 10530 },
],
},
{
name: 'operator',
children: [
{
name: 'distortion',
children: [
{ name: 'BifocalDistortion', value: 4461 },
{ name: 'Distortion', value: 6314 },
{ name: 'FisheyeDistortion', value: 3444 },
],
},
{
name: 'encoder',
children: [
{ name: 'ColorEncoder', value: 3179 },
{ name: 'Encoder', value: 4060 },
{ name: 'PropertyEncoder', value: 4138 },
{ name: 'ShapeEncoder', value: 1690 },
{ name: 'SizeEncoder', value: 1830 },
],
},
{
name: 'filter',
children: [
{ name: 'FisheyeTreeFilter', value: 5219 },
{ name: 'GraphDistanceFilter', value: 3165 },
{ name: 'VisibilityFilter', value: 3509 },
],
},
{ name: 'IOperator', value: 1286 },
{
name: 'label',
children: [
{ name: 'Labeler', value: 9956 },
{ name: 'RadialLabeler', value: 3899 },
{ name: 'StackedAreaLabeler', value: 3202 },
],
},
{
name: 'layout',
children: [
{ name: 'AxisLayout', value: 6725 },
{ name: 'BundledEdgeRouter', value: 3727 },
{ name: 'CircleLayout', value: 9317 },
{ name: 'CirclePackingLayout', value: 12003 },
{ name: 'DendrogramLayout', value: 4853 },
{ name: 'ForceDirectedLayout', value: 8411 },
{ name: 'IcicleTreeLayout', value: 4864 },
{ name: 'IndentedTreeLayout', value: 3174 },
{ name: 'Layout', value: 7881 },
{ name: 'NodeLinkTreeLayout', value: 12870 },
{ name: 'PieLayout', value: 2728 },
{ name: 'RadialTreeLayout', value: 12348 },
{ name: 'RandomLayout', value: 870 },
{ name: 'StackedAreaLayout', value: 9121 },
{ name: 'TreeMapLayout', value: 9191 },
],
},
{ name: 'Operator', value: 2490 },
{ name: 'OperatorList', value: 5248 },
{ name: 'OperatorSequence', value: 4190 },
{ name: 'OperatorSwitch', value: 2581 },
{ name: 'SortOperator', value: 2023 },
],
},
{ name: 'Visualization', value: 16540 },
],
},
],
};
const width = 750,
height = 750,
radius = width / 2;
const tree = d3.cluster().size([2 * Math.PI, radius - 100]);
const root = tree(
d3
.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name))
);
const svg = d3
.select('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
svg
.append('g')
.attr('fill', 'none')
.attr('stroke', '#555')
.attr('stroke-opacity', 0.4)
.attr('stroke-width', 1.5)
.selectAll('path')
.data(root.links())
.join('path')
.attr(
'd',
d3
.linkRadial()
.angle((d) => d.x)
.radius((d) => d.y)
);
svg
.append('g')
.selectAll('circle')
.data(root.descendants())
.join('circle')
.attr(
'transform',
(d) => `
rotate(${(d.x * 180) / Math.PI - 90})
translate(${d.y},0)
`
)
.attr('fill', (d) => (d.children ? '#555' : '#999'))
.attr('r', 2.5);
svg
.append('g')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('stroke-linejoin', 'round')
.attr('stroke-width', 3)
.selectAll('text')
.data(root.descendants())
.join('text')
.attr(
'transform',
(d) => `
rotate(${(d.x * 180) / Math.PI - 90})
translate(${d.y},0)
rotate(${d.x >= Math.PI ? 180 : 0})
`
)
.attr('dy', '0.31em')
.attr('x', (d) => (d.x < Math.PI === !d.children ? 6 : -6))
.attr('text-anchor', (d) =>
d.x < Math.PI === !d.children ? 'start' : 'end'
)
.text((d) => d.data.name)
.clone(true)
.lower()
.attr('stroke', 'white');
</script>
</body>
</html>