<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title></title> <script src='https://cdn.bootcss.com/echarts/3.7.1/echarts.js'></script> </head> <body> <div style='height:100px;'> <div>需求：在Echarts中，图例的说明文字分左右两段，左段左对齐，右段右对齐</div> <div>实现：</div> <div>在HTML中，黑体、楷体、宋体，这3种字体严格遵守“汉字占2个字符宽、字母占1个字符宽”，其它的字体不行</div> <div>通过计算，找出说明文字最长的项，然后计算其它各项与这项的差值，并用相应的多个汉字空格和一个英文空格插入说明文字中间</div> <div>例如formatter函数里用name+u3000+u3000+u3000+u0020+percent</div> </div> <div id='myEchartsId' style='height:900px;'></div> </body> </html> <script type='text/javascript'> var myEcharts = echarts.init(document.getElementById('myEchartsId')); myEcharts.hideLoading(); var graph = makeData(); var categories = []; for (var i = 0; i < 9; i++) { categories[i] = { name: '类目' + i }; } graph.nodes.forEach(function (node) { node.itemStyle = null; node.value = node.symbolSize; node.symbolSize /= 1.5; node.label = { normal: { show: node.symbolSize > 10 } }; //node.category = node.attributes.modularity_class; }); myEchartsOption = { title: { text: 'Les Miserables', subtext: 'Circular layout', top: 'bottom', left: 'right' }, tooltip: {}, legend: [{ textStyle: { color: 'red', fontStyle: 'normal', fontFamily: '宋体' }, // selectedMode: 'single', data: categories.map(function (a) { return a.name; }) }], animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { name: 'Les Miserables', type: 'graph', layout: 'circular', circular: { rotateLabel: true }, data: graph.nodes, links: graph.links, categories: categories, roam: true, label: { normal: { position: 'right', formatter: '{b}' } }, lineStyle: { normal: { color: 'source', curveness: 0.3 } } } ] }; myEcharts.setOption(myEchartsOption); myEcharts.on('click',function(event){ console.log(event) }) function makeData() { var nodes = [ { attributes: { modularity_class: 0 }, category: 0, id: "0", itemStyle: null, label: { normal: { show: true } }, name: "Myriel", symbolSize: 19.12381, value: 28.685715, x: -266.82776, y: 299.6904 }, { attributes: { modularity_class: 0 }, category: 0, id: "1", itemStyle: null, label: { normal: { show: false } }, name: "Napoleon", symbolSize: 2.6666666666666665, value: 4, x: -418.08344, y: 446.8853 }, { attributes: { modularity_class: 1 }, category: 1, id: "2", itemStyle: null, label: { normal: { show: false } }, name: "MlleBaptistine", symbolSize: 6.323809333333333, value: 9.485714, x: -212.76357, y: 245.29176 }, { attributes: { modularity_class: 1 }, category: 1, id: "3", itemStyle: null, label: { normal: { show: false } }, name: "MmeMagloire", symbolSize: 6.323809333333333, value: 9.485714, x: -242.82404, y: 235.26283 }, { attributes: { modularity_class: 0 }, category: 0, id: "4", itemStyle: null, label: { normal: { show: false } }, name: "CountessDeLo", symbolSize: 2.6666666666666665, value: 4, x: -379.30386, y: 429.06424 }, { attributes: { modularity_class: 0 }, category: 0, id: "5", itemStyle: null, label: { normal: { show: false } }, name: "Geborand", symbolSize: 2.6666666666666665, value: 4, x: -417.26337, y: 406.03506 }, { attributes: { modularity_class: 0 }, category: 0, id: "6", itemStyle: null, label: { normal: { show: false } }, name: "Champtercier", symbolSize: 2.6666666666666665, value: 4, x: -332.6012, y: 485.16974 }, { attributes: { modularity_class: 0 }, category: 0, id: "7", itemStyle: null, label: { normal: { show: false } }, name: "Cravatte", symbolSize: 2.6666666666666665, value: 4, x: -382.69568, y: 475.09113 }, { attributes: { modularity_class: 0 }, category: 0, id: "8", itemStyle: null, label: { normal: { show: false } }, name: "Count", symbolSize: 2.6666666666666665, value: 4, x: -320.384, y: 387.17325 }, { attributes: { modularity_class: 0 }, category: 0, id: "9", itemStyle: null, label: { normal: { show: false } }, name: "OldMan", symbolSize: 2.6666666666666665, value: 4, x: -344.39832, y: 451.16772 }, { attributes: { modularity_class: 1 }, category: 1, id: "10", itemStyle: null, label: { normal: { show: false } }, name: "Labarre", symbolSize: 2.6666666666666665, value: 4, x: -89.34107, y: 234.56128 }, { attributes: { modularity_class: 1 }, category: 1, id: "11", itemStyle: null, label: { normal: { show: true } }, name: "Valjean", symbolSize: 66.66666666666667, value: 100, x: -87.93029, y: -6.8120565 }, { attributes: { modularity_class: 1 }, category: 1, id: "12", itemStyle: null, label: { normal: { show: false } }, name: "Marguerite", symbolSize: 4.495239333333333, value: 6.742859, x: -339.77908, y: -184.69139 }, { attributes: { modularity_class: 1 }, category: 1, id: "13", itemStyle: null, label: { normal: { show: false } }, name: "MmeDeR", symbolSize: 2.6666666666666665, value: 4, x: -194.31313, y: 178.55301 }, { attributes: { modularity_class: 1 }, category: 1, id: "14", itemStyle: null, label: { normal: { show: false } }, name: "Isabeau", symbolSize: 2.6666666666666665, value: 4, x: -158.05168, y: 201.99768 }, { attributes: { modularity_class: 1 }, category: 1, id: "15", itemStyle: null, label: { normal: { show: false } }, name: "Gervais", symbolSize: 2.6666666666666665, value: 4, x: -127.701546, y: 242.55057 }, { attributes: { modularity_class: 2 }, category: 2, id: "16", itemStyle: null, label: { normal: { show: true } }, name: "Tholomyes", symbolSize: 17.295237333333333, value: 25.942856, x: -385.2226, y: -393.5572 }, { attributes: { modularity_class: 2 }, category: 2, id: "17", itemStyle: null, label: { normal: { show: true } }, name: "Listolier", symbolSize: 13.638097333333334, value: 20.457146, x: -516.55884, y: -393.98975 }, { attributes: { modularity_class: 2 }, category: 2, id: "18", itemStyle: null, label: { normal: { show: true } }, name: "Fameuil", symbolSize: 13.638097333333334, value: 20.457146, x: -464.79382, y: -493.57944 }, { attributes: { modularity_class: 2 }, category: 2, id: "19", itemStyle: null, label: { normal: { show: true } }, name: "Blacheville", symbolSize: 13.638097333333334, value: 20.457146, x: -515.1624, y: -456.9891 }, { attributes: { modularity_class: 2 }, category: 2, id: "20", itemStyle: null, label: { normal: { show: true } }, name: "Favourite", symbolSize: 13.638097333333334, value: 20.457146, x: -408.12122, y: -464.5048 }, { attributes: { modularity_class: 2 }, category: 2, id: "21", itemStyle: null, label: { normal: { show: true } }, name: "Dahlia", symbolSize: 13.638097333333334, value: 20.457146, x: -456.44113, y: -425.13303 }, { attributes: { modularity_class: 2 }, category: 2, id: "22", itemStyle: null, label: { normal: { show: true } }, name: "Zephine", symbolSize: 13.638097333333334, value: 20.457146, x: -459.1107, y: -362.5133 }, { attributes: { modularity_class: 2 }, category: 2, id: "23", itemStyle: null, label: { normal: { show: true } }, name: "Fantine", symbolSize: 28.266666666666666, value: 42.4, x: -313.42786, y: -289.44803 }, { attributes: { modularity_class: 7 }, category: 7, id: "24", itemStyle: null, label: { normal: { show: true } }, name: "MmeThenardier", symbolSize: 20.95238266666667, value: 31.428574, x: 4.6313396, y: -273.8517 }, { attributes: { modularity_class: 7 }, category: 7, id: "25", itemStyle: null, label: { normal: { show: true } }, name: "Thenardier", symbolSize: 30.095235333333335, value: 45.142853, x: 82.80825, y: -203.1144 }, { attributes: { modularity_class: 6 }, category: 6, id: "26", itemStyle: null, label: { normal: { show: true } }, name: "Cosette", symbolSize: 20.95238266666667, value: 31.428574, x: 78.64646, y: -31.512747 }, { attributes: { modularity_class: 7 }, category: 7, id: "27", itemStyle: null, label: { normal: { show: true } }, name: "Javert", symbolSize: 31.923806666666668, value: 47.88571, x: -81.46074, y: -204.20204 }, { attributes: { modularity_class: 4 }, category: 4, id: "28", itemStyle: null, label: { normal: { show: false } }, name: "Fauchelevent", symbolSize: 8.152382000000001, value: 12.228573, x: -225.73984, y: 82.41631 }, { attributes: { modularity_class: 3 }, category: 3, id: "29", itemStyle: null, label: { normal: { show: true } }, name: "Bamatabois", symbolSize: 15.466666666666667, value: 23.2, x: -385.6842, y: -20.206686 }, { attributes: { modularity_class: 2 }, category: 2, id: "30", itemStyle: null, label: { normal: { show: false } }, name: "Perpetue", symbolSize: 4.495239333333333, value: 6.742859, x: -403.92447, y: -197.69823 }, { attributes: { modularity_class: 2 }, category: 2, id: "31", itemStyle: null, label: { normal: { show: false } }, name: "Simplice", symbolSize: 8.152382000000001, value: 12.228573, x: -281.4253, y: -158.45137 }, { attributes: { modularity_class: 1 }, category: 1, id: "32", itemStyle: null, label: { normal: { show: false } }, name: "Scaufflaire", symbolSize: 2.6666666666666665, value: 4, x: -122.41348, y: 210.37503 }, { attributes: { modularity_class: 1 }, category: 1, id: "33", itemStyle: null, label: { normal: { show: false } }, name: "Woman1", symbolSize: 4.495239333333333, value: 6.742859, x: -234.6001, y: -113.15067 }, { attributes: { modularity_class: 3 }, category: 3, id: "34", itemStyle: null, label: { normal: { show: true } }, name: "Judge", symbolSize: 11.809524666666666, value: 17.714287, x: -387.84915, y: 58.7059 }, { attributes: { modularity_class: 3 }, category: 3, id: "35", itemStyle: null, label: { normal: { show: true } }, name: "Champmathieu", symbolSize: 11.809524666666666, value: 17.714287, x: -338.2307, y: 87.48405 }, { attributes: { modularity_class: 3 }, category: 3, id: "36", itemStyle: null, label: { normal: { show: true } }, name: "Brevet", symbolSize: 11.809524666666666, value: 17.714287, x: -453.26874, y: 58.94648 }, { attributes: { modularity_class: 3 }, category: 3, id: "37", itemStyle: null, label: { normal: { show: true } }, name: "Chenildieu", symbolSize: 11.809524666666666, value: 17.714287, x: -386.44904, y: 140.05937 }, { attributes: { modularity_class: 3 }, category: 3, id: "38", itemStyle: null, label: { normal: { show: true } }, name: "Cochepaille", symbolSize: 11.809524666666666, value: 17.714287, x: -446.7876, y: 123.38005 }, { attributes: { modularity_class: 6 }, category: 6, id: "39", itemStyle: null, label: { normal: { show: false } }, name: "Pontmercy", symbolSize: 6.323809333333333, value: 9.485714, x: 336.49738, y: -269.55914 }, { attributes: { modularity_class: 7 }, category: 7, id: "40", itemStyle: null, label: { normal: { show: false } }, name: "Boulatruelle", symbolSize: 2.6666666666666665, value: 4, x: 29.187843, y: -460.13132 }, { attributes: { modularity_class: 7 }, category: 7, id: "41", itemStyle: null, label: { normal: { show: true } }, name: "Eponine", symbolSize: 20.95238266666667, value: 31.428574, x: 238.36697, y: -210.00926 }, { attributes: { modularity_class: 7 }, category: 7, id: "42", itemStyle: null, label: { normal: { show: false } }, name: "Anzelma", symbolSize: 6.323809333333333, value: 9.485714, x: 189.69513, y: -346.50662 }, { attributes: { modularity_class: 6 }, category: 6, id: "43", itemStyle: null, label: { normal: { show: false } }, name: "Woman2", symbolSize: 6.323809333333333, value: 9.485714, x: -187.00418, y: -145.02663 }, { attributes: { modularity_class: 4 }, category: 4, id: "44", itemStyle: null, label: { normal: { show: false } }, name: "MotherInnocent", symbolSize: 4.495239333333333, value: 6.742859, x: -252.99521, y: 129.87549 }, { attributes: { modularity_class: 4 }, category: 4, id: "45", itemStyle: null, label: { normal: { show: false } }, name: "Gribier", symbolSize: 2.6666666666666665, value: 4, x: -296.07935, y: 163.11964 }, { attributes: { modularity_class: 5 }, category: 5, id: "46", itemStyle: null, label: { normal: { show: false } }, name: "Jondrette", symbolSize: 2.6666666666666665, value: 4, x: 550.3201, y: 522.4031 }, { attributes: { modularity_class: 5 }, category: 5, id: "47", itemStyle: null, label: { normal: { show: false } }, name: "MmeBurgon", symbolSize: 4.495239333333333, value: 6.742859, x: 488.13535, y: 356.8573 }, { attributes: { modularity_class: 8 }, category: 8, id: "48", itemStyle: null, label: { normal: { show: true } }, name: "Gavroche", symbolSize: 41.06667066666667, value: 61.600006, x: 387.89572, y: 110.462326 }, { attributes: { modularity_class: 6 }, category: 6, id: "49", itemStyle: null, label: { normal: { show: true } }, name: "Gillenormand", symbolSize: 13.638097333333334, value: 20.457146, x: 126.4831, y: 68.10622 }, { attributes: { modularity_class: 6 }, category: 6, id: "50", itemStyle: null, label: { normal: { show: false } }, name: "Magnon", symbolSize: 4.495239333333333, value: 6.742859, x: 127.07365, y: -113.05923 }, { attributes: { modularity_class: 6 }, category: 6, id: "51", itemStyle: null, label: { normal: { show: true } }, name: "MlleGillenormand", symbolSize: 13.638097333333334, value: 20.457146, x: 162.63559, y: 117.6565 }, { attributes: { modularity_class: 6 }, category: 6, id: "52", itemStyle: null, label: { normal: { show: false } }, name: "MmePontmercy", symbolSize: 4.495239333333333, value: 6.742859, x: 353.66415, y: -205.89165 }, { attributes: { modularity_class: 6 }, category: 6, id: "53", itemStyle: null, label: { normal: { show: false } }, name: "MlleVaubois", symbolSize: 2.6666666666666665, value: 4, x: 165.43939, y: 339.7736 }, { attributes: { modularity_class: 6 }, category: 6, id: "54", itemStyle: null, label: { normal: { show: false } }, name: "LtGillenormand", symbolSize: 8.152382000000001, value: 12.228573, x: 137.69348, y: 196.1069 }, { attributes: { modularity_class: 6 }, category: 6, id: "55", itemStyle: null, label: { normal: { show: true } }, name: "Marius", symbolSize: 35.58095333333333, value: 53.37143, x: 206.44687, y: -13.805411 }, { attributes: { modularity_class: 6 }, category: 6, id: "56", itemStyle: null, label: { normal: { show: false } }, name: "BaronessT", symbolSize: 4.495239333333333, value: 6.742859, x: 194.82993, y: 224.78036 }, { attributes: { modularity_class: 8 }, category: 8, id: "57", itemStyle: null, label: { normal: { show: true } }, name: "Mabeuf", symbolSize: 20.95238266666667, value: 31.428574, x: 597.6618, y: 135.18481 }, { attributes: { modularity_class: 8 }, category: 8, id: "58", itemStyle: null, label: { normal: { show: true } }, name: "Enjolras", symbolSize: 28.266666666666666, value: 42.4, x: 355.78366, y: -74.882454 }, { attributes: { modularity_class: 8 }, category: 8, id: "59", itemStyle: null, label: { normal: { show: true } }, name: "Combeferre", symbolSize: 20.95238266666667, value: 31.428574, x: 515.2961, y: -46.167564 }, { attributes: { modularity_class: 8 }, category: 8, id: "60", itemStyle: null, label: { normal: { show: true } }, name: "Prouvaire", symbolSize: 17.295237333333333, value: 25.942856, x: 614.29285, y: -69.3104 }, { attributes: { modularity_class: 8 }, category: 8, id: "61", itemStyle: null, label: { normal: { show: true } }, name: "Feuilly", symbolSize: 20.95238266666667, value: 31.428574, x: 550.1917, y: -128.17537 }, { attributes: { modularity_class: 8 }, category: 8, id: "62", itemStyle: null, label: { normal: { show: true } }, name: "Courfeyrac", symbolSize: 24.609526666666667, value: 36.91429, x: 436.17184, y: -12.7286825 }, { attributes: { modularity_class: 8 }, category: 8, id: "63", itemStyle: null, label: { normal: { show: true } }, name: "Bahorel", symbolSize: 22.780953333333333, value: 34.17143, x: 602.55225, y: 16.421427 }, { attributes: { modularity_class: 8 }, category: 8, id: "64", itemStyle: null, label: { normal: { show: true } }, name: "Bossuet", symbolSize: 24.609526666666667, value: 36.91429, x: 455.81955, y: -115.45826 }, { attributes: { modularity_class: 8 }, category: 8, id: "65", itemStyle: null, label: { normal: { show: true } }, name: "Joly", symbolSize: 22.780953333333333, value: 34.17143, x: 516.40784, y: 47.242233 }, { attributes: { modularity_class: 8 }, category: 8, id: "66", itemStyle: null, label: { normal: { show: true } }, name: "Grantaire", symbolSize: 19.12381, value: 28.685715, x: 646.4313, y: -151.06331 }, { attributes: { modularity_class: 8 }, category: 8, id: "67", itemStyle: null, label: { normal: { show: false } }, name: "MotherPlutarch", symbolSize: 2.6666666666666665, value: 4, x: 668.9568, y: 204.65488 }, { attributes: { modularity_class: 7 }, category: 7, id: "68", itemStyle: null, label: { normal: { show: true } }, name: "Gueulemer", symbolSize: 19.12381, value: 28.685715, x: 78.4799, y: -347.15146 }, { attributes: { modularity_class: 7 }, category: 7, id: "69", itemStyle: null, label: { normal: { show: true } }, name: "Babet", symbolSize: 19.12381, value: 28.685715, x: 150.35959, y: -298.50797 }, { attributes: { modularity_class: 7 }, category: 7, id: "70", itemStyle: null, label: { normal: { show: true } }, name: "Claquesous", symbolSize: 19.12381, value: 28.685715, x: 137.3717, y: -410.2809 }, { attributes: { modularity_class: 7 }, category: 7, id: "71", itemStyle: null, label: { normal: { show: true } }, name: "Montparnasse", symbolSize: 17.295237333333333, value: 25.942856, x: 234.87747, y: -400.85983 }, { attributes: { modularity_class: 1 }, category: 1, id: "72", itemStyle: null, label: { normal: { show: false } }, name: "Toussaint", symbolSize: 6.323809333333333, value: 9.485714, x: 40.942253, y: 113.78272 }, { attributes: { modularity_class: 8 }, category: 8, id: "73", itemStyle: null, label: { normal: { show: false } }, name: "Child1", symbolSize: 4.495239333333333, value: 6.742859, x: 437.939, y: 291.58234 }, { attributes: { modularity_class: 8 }, category: 8, id: "74", itemStyle: null, label: { normal: { show: false } }, name: "Child2", symbolSize: 4.495239333333333, value: 6.742859, x: 466.04922, y: 283.3606 }, { attributes: { modularity_class: 7 }, category: 7, id: "75", itemStyle: null, label: { normal: { show: true } }, name: "Brujon", symbolSize: 13.638097333333334, value: 20.457146, x: 238.79364, y: -314.06345 }, { attributes: { modularity_class: 8 }, category: 8, id: "76", itemStyle: null, label: { normal: { show: true } } }, { name: "MmeHucheloup", symbolSize: 13.638097333333334, value: 20.457146, x: 712.18353, y: 4.8131495 }, ]; var links = [ { id: "0", name: null, source: "1", target: "0", lineStyle: { normal: {} } }, { id: "1", name: null, source: "2", target: "0", lineStyle: { normal: {} } }, { id: "2", name: null, source: "3", target: "0", lineStyle: { normal: {} } }, { id: "3", name: null, source: "3", target: "2", lineStyle: { normal: {} } }, { id: "4", name: null, source: "4", target: "0", lineStyle: { normal: {} } }, { id: "5", name: null, source: "5", target: "0", lineStyle: { normal: {} } }, { id: "6", name: null, source: "6", target: "0", lineStyle: { normal: {} } }, { id: "7", name: null, source: "7", target: "0", lineStyle: { normal: {} } }, { id: "8", name: null, source: "8", target: "0", lineStyle: { normal: {} } }, { id: "9", name: null, source: "9", target: "0", lineStyle: { normal: {} } }, { id: "13", name: null, source: "11", target: "0", lineStyle: { normal: {} } }, { id: null, name: null, source: "11", target: "2", lineStyle: { normal: {} } }, { id: "11", name: null, source: "11", target: "3", lineStyle: { normal: {} } }, { id: "10", name: null, source: "11", target: "10", lineStyle: { normal: {} } }, { id: "14", name: null, source: "12", target: "11", lineStyle: { normal: {} } }, { id: "15", name: null, source: "13", target: "11", lineStyle: { normal: {} } }, { id: "16", name: null, source: "14", target: "11", lineStyle: { normal: {} } }, { id: "17", name: null, source: "15", target: "11", lineStyle: { normal: {} } }, { id: "18", name: null, source: "17", target: "16", lineStyle: { normal: {} } }, { id: "19", name: null, source: "18", target: "16", lineStyle: { normal: {} } }, { id: "20", name: null, source: "18", target: "17", lineStyle: { normal: {} } }, { id: "21", name: null, source: "19", target: "16", lineStyle: { normal: {} } }, { id: "22", name: null, source: "19", target: "17", lineStyle: { normal: {} } }, { id: "23", name: null, source: "19", target: "18", lineStyle: { normal: {} } }, { id: "24", name: null, source: "20", target: "16", lineStyle: { normal: {} } }, { id: "25", name: null, source: "20", target: "17", lineStyle: { normal: {} } }, { id: "26", name: null, source: "20", target: "18", lineStyle: { normal: {} } }, { id: "27", name: null, source: "20", target: "19", lineStyle: { normal: {} } }, { id: "28", name: null, source: "21", target: "16", lineStyle: { normal: {} } }, { id: "29", name: null, source: "21", target: "17", lineStyle: { normal: {} } }, { id: "30", name: null, source: "21", target: "18", lineStyle: { normal: {} } }, { id: "31", name: null, source: "21", target: "19", lineStyle: { normal: {} } }, { id: "32", name: null, source: "21", target: "20", lineStyle: { normal: {} } }, { id: "33", name: null, source: "22", target: "16", lineStyle: { normal: {} } }, { id: "34", name: null, source: "22", target: "17", lineStyle: { normal: {} } }, { id: "35", name: null, source: "22", target: "18", lineStyle: { normal: {} } }, { id: "36", name: null, source: "22", target: "19", lineStyle: { normal: {} } }, { id: "37", name: null, source: "22", target: "20", lineStyle: { normal: {} } }, { id: "38", name: null, source: "22", target: "21", lineStyle: { normal: {} } }, { id: "47", name: null, source: "23", target: "11", lineStyle: { normal: {} } }, { id: "46", name: null, source: "23", target: "12", lineStyle: { normal: {} } }, { id: "39", name: null, source: "23", target: "16", lineStyle: { normal: {} } }, { id: "40", name: null, source: "23", target: "17", lineStyle: { normal: {} } }, { id: "41", name: null, source: "23", target: "18", lineStyle: { normal: {} } }, { id: "42", name: null, source: "23", target: "19", lineStyle: { normal: {} } }, { id: "43", name: null, source: "23", target: "20", lineStyle: { normal: {} } }, { id: "44", name: null, source: "23", target: "21", lineStyle: { normal: {} } }, { id: "45", name: null, source: "23", target: "22", lineStyle: { normal: {} } }, { id: null, name: null, source: "24", target: "11", lineStyle: { normal: {} } }, { id: "48", name: null, source: "24", target: "23", lineStyle: { normal: {} } }, { id: "52", name: null, source: "25", target: "11", lineStyle: { normal: {} } }, { id: "51", name: null, source: "25", target: "23", lineStyle: { normal: {} } }, { id: "50", name: null, source: "25", target: "24", lineStyle: { normal: {} } }, { id: null, name: null, source: "26", target: "11", lineStyle: { normal: {} } }, { id: null, name: null, source: "26", target: "16", lineStyle: { normal: {} } }, { id: "53", name: null, source: "26", target: "24", lineStyle: { normal: {} } }, { id: "56", name: null, source: "26", target: "25", lineStyle: { normal: {} } }, { id: "57", name: null, source: "27", target: "11", lineStyle: { normal: {} } }, { id: "58", name: null, source: "27", target: "23", lineStyle: { normal: {} } }, { id: null, name: null, source: "27", target: "24", lineStyle: { normal: {} } }, { id: "59", name: null, source: "27", target: "25", lineStyle: { normal: {} } }, { id: "61", name: null, source: "27", target: "26", lineStyle: { normal: {} } }, { id: "62", name: null, source: "28", target: "11", lineStyle: { normal: {} } }, { id: "63", name: null, source: "28", target: "27", lineStyle: { normal: {} } }, { id: "66", name: null, source: "29", target: "11", lineStyle: { normal: {} } }, { id: "64", name: null, source: "29", target: "23", lineStyle: { normal: {} } }, { id: "65", name: null, source: "29", target: "27", lineStyle: { normal: {} } }, { id: "67", name: null, source: "30", target: "23", lineStyle: { normal: {} } }, { id: null, name: null, source: "31", target: "11", lineStyle: { normal: {} } }, { id: null, name: null, source: "31", target: "23", lineStyle: { normal: {} } }, { id: null, name: null, source: "31", target: "27", lineStyle: { normal: {} } }, { id: "68", name: null, source: "31", target: "30", lineStyle: { normal: {} } }, { id: "72", name: null, source: "32", target: "11", lineStyle: { normal: {} } }, { id: "73", name: null, source: "33", target: "11", lineStyle: { normal: {} } }, { id: "74", name: null, source: "33", target: "27", lineStyle: { normal: {} } }, { id: "75", name: null, source: "34", target: "11", lineStyle: { normal: {} } }, { id: "76", name: null, source: "34", target: "29", lineStyle: { normal: {} } }, { id: "77", name: null, source: "35", target: "11", lineStyle: { normal: {} } }, { id: null, name: null, source: "35", target: "29", lineStyle: { normal: {} } }, { id: "78", name: null, source: "35", target: "34", lineStyle: { normal: {} } }, { id: "82", name: null, source: "36", target: "11", lineStyle: { normal: {} } }, { id: "83", name: null, source: "36", target: "29", lineStyle: { normal: {} } }, { id: "80", name: null, source: "36", target: "34", lineStyle: { normal: {} } }, { id: "81", name: null, source: "36", target: "35", lineStyle: { normal: {} } }, { id: "87", name: null, source: "37", target: "11", lineStyle: { normal: {} } }, { id: "88", name: null, source: "37", target: "29", lineStyle: { normal: {} } }, { id: "84", name: null, source: "37", target: "34", lineStyle: { normal: {} } }, { id: "85", name: null, source: "37", target: "35", lineStyle: { normal: {} } }, { id: "86", name: null, source: "37", target: "36", lineStyle: { normal: {} } }, { id: "93", name: null, source: "38", target: "11", lineStyle: { normal: {} } }, { id: "94", name: null, source: "38", target: "29", lineStyle: { normal: {} } }, { id: "89", name: null, source: "38", target: "34", lineStyle: { normal: {} } }, { id: "90", name: null, source: "38", target: "35", lineStyle: { normal: {} } }, { id: "91", name: null, source: "38", target: "36", lineStyle: { normal: {} } }, { id: "92", name: null, source: "38", target: "37", lineStyle: { normal: {} } }, { id: "95", name: null, source: "39", target: "25", lineStyle: { normal: {} } }, { id: "96", name: null, source: "40", target: "25", lineStyle: { normal: {} } }, { id: "97", name: null, source: "41", target: "24", lineStyle: { normal: {} } }, { id: "98", name: null, source: "41", target: "25", lineStyle: { normal: {} } }, { id: "101", name: null, source: "42", target: "24", lineStyle: { normal: {} } }, { id: "100", name: null, source: "42", target: "25", lineStyle: { normal: {} } }, { id: "99", name: null, source: "42", target: "41", lineStyle: { normal: {} } }, { id: "102", name: null, source: "43", target: "11", lineStyle: { normal: {} } }, { id: "103", name: null, source: "43", target: "26", lineStyle: { normal: {} } }, { id: "104", name: null, source: "43", target: "27", lineStyle: { normal: {} } }, { id: null, name: null, source: "44", target: "11", lineStyle: { normal: {} } }, { id: "105", name: null, source: "44", target: "28", lineStyle: { normal: {} } }, { id: "107", name: null, source: "45", target: "28", lineStyle: { normal: {} } }, { id: "108", name: null, source: "47", target: "46", lineStyle: { normal: {} } }, { id: "112", name: null, source: "48", target: "11", lineStyle: { normal: {} } }, { id: "110", name: null, source: "48", target: "25", lineStyle: { normal: {} } }, { id: "111", name: null, source: "48", target: "27", lineStyle: { normal: {} } }, { id: "109", name: null, source: "48", target: "47", lineStyle: { normal: {} } }, { id: null, name: null, source: "49", target: "11", lineStyle: { normal: {} } }, { id: "113", name: null, source: "49", target: "26", lineStyle: { normal: {} } }, { id: null, name: null, source: "50", target: "24", lineStyle: { normal: {} } }, { id: "115", name: null, source: "50", target: "49", lineStyle: { normal: {} } }, { id: "119", name: null, source: "51", target: "11", lineStyle: { normal: {} } }, { id: "118", name: null, source: "51", target: "26", lineStyle: { normal: {} } }, { id: "117", name: null, source: "51", target: "49", lineStyle: { normal: {} } }, { id: null, name: null, source: "52", target: "39", lineStyle: { normal: {} } }, { id: "120", name: null, source: "52", target: "51", lineStyle: { normal: {} } }, { id: "122", name: null, source: "53", target: "51", lineStyle: { normal: {} } }, { id: "125", name: null, source: "54", target: "26", lineStyle: { normal: {} } }, { id: "124", name: null, source: "54", target: "49", lineStyle: { normal: {} } }, { id: "123", name: null, source: "54", target: "51", lineStyle: { normal: {} } }, { id: "131", name: null, source: "55", target: "11", lineStyle: { normal: {} } }, { id: "132", name: null, source: "55", target: "16", lineStyle: { normal: {} } }, { id: "133", name: null, source: "55", target: "25", lineStyle: { normal: {} } }, { id: null, name: null, source: "55", target: "26", lineStyle: { normal: {} } }, { id: "128", name: null, source: "55", target: "39", lineStyle: { normal: {} } }, { id: "134", name: null, source: "55", target: "41", lineStyle: { normal: {} } }, { id: "135", name: null, source: "55", target: "48", lineStyle: { normal: {} } }, { id: "127", name: null, source: "55", target: "49", lineStyle: { normal: {} } }, { id: "126", name: null, source: "55", target: "51", lineStyle: { normal: {} } }, { id: "129", name: null, source: "55", target: "54", lineStyle: { normal: {} } }, { id: "136", name: null, source: "56", target: "49", lineStyle: { normal: {} } }, { id: "137", name: null, source: "56", target: "55", lineStyle: { normal: {} } }, { id: null, name: null, source: "57", target: "41", lineStyle: { normal: {} } }, { id: null, name: null, source: "57", target: "48", lineStyle: { normal: {} } }, { id: "138", name: null, source: "57", target: "55", lineStyle: { normal: {} } }, { id: "145", name: null, source: "58", target: "11", lineStyle: { normal: {} } }, { id: null, name: null, source: "58", target: "27", lineStyle: { normal: {} } }, { id: "142", name: null, source: "58", target: "48", lineStyle: { normal: {} } }, { id: "141", name: null, source: "58", target: "55", lineStyle: { normal: {} } }, { id: "144", name: null, source: "58", target: "57", lineStyle: { normal: {} } }, { id: "148", name: null, source: "59", target: "48", lineStyle: { normal: {} } }, { id: "147", name: null, source: "59", target: "55", lineStyle: { normal: {} } }, { id: null, name: null, source: "59", target: "57", lineStyle: { normal: {} } }, { id: "146", name: null, source: "59", target: "58", lineStyle: { normal: {} } }, { id: "150", name: null, source: "60", target: "48", lineStyle: { normal: {} } }, { id: "151", name: null, source: "60", target: "58", lineStyle: { normal: {} } }, { id: "152", name: null, source: "60", target: "59", lineStyle: { normal: {} } }, { id: "153", name: null, source: "61", target: "48", lineStyle: { normal: {} } }, { id: "158", name: null, source: "61", target: "55", lineStyle: { normal: {} } }, { id: "157", name: null, source: "61", target: "57", lineStyle: { normal: {} } }, { id: "154", name: null, source: "61", target: "58", lineStyle: { normal: {} } }, { id: "156", name: null, source: "61", target: "59", lineStyle: { normal: {} } }, { id: "155", name: null, source: "61", target: "60", lineStyle: { normal: {} } }, { id: "164", name: null, source: "62", target: "41", lineStyle: { normal: {} } }, { id: "162", name: null, source: "62", target: "48", lineStyle: { normal: {} } }, { id: "159", name: null, source: "62", target: "55", lineStyle: { normal: {} } }, { id: null, name: null, source: "62", target: "57", lineStyle: { normal: {} } }, { id: "160", name: null, source: "62", target: "58", lineStyle: { normal: {} } }, { id: "161", name: null, source: "62", target: "59", lineStyle: { normal: {} } }, { id: null, name: null, source: "62", target: "60", lineStyle: { normal: {} } }, { id: "165", name: null, source: "62", target: "61", lineStyle: { normal: {} } }, { id: null, name: null, source: "63", target: "48", lineStyle: { normal: {} } }, { id: "174", name: null, source: "63", target: "55", lineStyle: { normal: {} } }, { id: null, name: null, source: "63", target: "57", lineStyle: { normal: {} } }, { id: null, name: null, source: "63", target: "58", lineStyle: { normal: {} } }, { id: "167", name: null, source: "63", target: "59", lineStyle: { normal: {} } }, { id: null, name: null, source: "63", target: "60", lineStyle: { normal: {} } }, { id: "172", name: null, source: "63", target: "61", lineStyle: { normal: {} } }, { id: "169", name: null, source: "63", target: "62", lineStyle: { normal: {} } }, { id: "184", name: null, source: "64", target: "11", lineStyle: { normal: {} } }, { id: null, name: null, source: "64", target: "48", lineStyle: { normal: {} } }, { id: "175", name: null, source: "64", target: "55", lineStyle: { normal: {} } }, { id: "183", name: null, source: "64", target: "57", lineStyle: { normal: {} } }, { id: "179", name: null, source: "64", target: "58", lineStyle: { normal: {} } }, { id: "182", name: null, source: "64", target: "59", lineStyle: { normal: {} } }, { id: "181", name: null, source: "64", target: "60", lineStyle: { normal: {} } }, { id: "180", name: null, source: "64", target: "61", lineStyle: { normal: {} } }, { id: "176", name: null, source: "64", target: "62", lineStyle: { normal: {} } }, { id: "178", name: null, source: "64", target: "63", lineStyle: { normal: {} } }, { id: "187", name: null, source: "65", target: "48", lineStyle: { normal: {} } }, { id: "194", name: null, source: "65", target: "55", lineStyle: { normal: {} } }, { id: "193", name: null, source: "65", target: "57", lineStyle: { normal: {} } }, { id: null, name: null, source: "65", target: "58", lineStyle: { normal: {} } }, { id: "192", name: null, source: "65", target: "59", lineStyle: { normal: {} } }, { id: null, name: null, source: "65", target: "60", lineStyle: { normal: {} } }, { id: "190", name: null, source: "65", target: "61", lineStyle: { normal: {} } }, { id: "188", name: null, source: "65", target: "62", lineStyle: { normal: {} } }, { id: "185", name: null, source: "65", target: "63", lineStyle: { normal: {} } }, { id: "186", name: null, source: "65", target: "64", lineStyle: { normal: {} } }, { id: "200", name: null, source: "66", target: "48", lineStyle: { normal: {} } }, { id: "196", name: null, source: "66", target: "58", lineStyle: { normal: {} } }, { id: "197", name: null, source: "66", target: "59", lineStyle: { normal: {} } }, { id: "203", name: null, source: "66", target: "60", lineStyle: { normal: {} } }, { id: "202", name: null, source: "66", target: "61", lineStyle: { normal: {} } }, { id: "198", name: null, source: "66", target: "62", lineStyle: { normal: {} } }, { id: "201", name: null, source: "66", target: "63", lineStyle: { normal: {} } }, { id: "195", name: null, source: "66", target: "64", lineStyle: { normal: {} } }, { id: "199", name: null, source: "66", target: "65", lineStyle: { normal: {} } }, { id: "204", name: null, source: "67", target: "57", lineStyle: { normal: {} } }, { id: null, name: null, source: "68", target: "11", lineStyle: { normal: {} } }, { id: null, name: null, source: "68", target: "24", lineStyle: { normal: {} } }, { id: "205", name: null, source: "68", target: "25", lineStyle: { normal: {} } }, { id: "208", name: null, source: "68", target: "27", lineStyle: { normal: {} } }, { id: null, name: null, source: "68", target: "41", lineStyle: { normal: {} } }, { id: "209", name: null, source: "68", target: "48", lineStyle: { normal: {} } }, { id: "213", name: null, source: "69", target: "11", lineStyle: { normal: {} } }, { id: "214", name: null, source: "69", target: "24", lineStyle: { normal: {} } }, { id: "211", name: null, source: "69", target: "25", lineStyle: { normal: {} } }, { id: null, name: null, source: "69", target: "27", lineStyle: { normal: {} } }, { id: "217", name: null, source: "69", target: "41", lineStyle: { normal: {} } }, { id: "216", name: null, source: "69", target: "48", lineStyle: { normal: {} } }, { id: "212", name: null, source: "69", target: "68", lineStyle: { normal: {} } }, { id: "221", name: null, source: "70", target: "11", lineStyle: { normal: {} } }, { id: "222", name: null, source: "70", target: "24", lineStyle: { normal: {} } }, { id: "218", name: null, source: "70", target: "25", lineStyle: { normal: {} } }, { id: "223", name: null, source: "70", target: "27", lineStyle: { normal: {} } }, { id: "224", name: null, source: "70", target: "41", lineStyle: { normal: {} } }, { id: "225", name: null, source: "70", target: "58", lineStyle: { normal: {} } }, { id: "220", name: null, source: "70", target: "68", lineStyle: { normal: {} } }, { id: "219", name: null, source: "70", target: "69", lineStyle: { normal: {} } }, { id: "230", name: null, source: "71", target: "11", lineStyle: { normal: {} } }, { id: "233", name: null, source: "71", target: "25", lineStyle: { normal: {} } }, { id: "226", name: null, source: "71", target: "27", lineStyle: { normal: {} } }, { id: "232", name: null, source: "71", target: "41", lineStyle: { normal: {} } }, { id: null, name: null, source: "71", target: "48", lineStyle: { normal: {} } }, { id: "228", name: null, source: "71", target: "68", lineStyle: { normal: {} } }, { id: "227", name: null, source: "71", target: "69", lineStyle: { normal: {} } }, { id: "229", name: null, source: "71", target: "70", lineStyle: { normal: {} } }, { id: "236", name: null, source: "72", target: "11", lineStyle: { normal: {} } }, { id: "234", name: null, source: "72", target: "26", lineStyle: { normal: {} } }, { id: "235", name: null, source: "72", target: "27", lineStyle: { normal: {} } }, { id: "237", name: null, source: "73", target: "48", lineStyle: { normal: {} } }, { id: "238", name: null, source: "74", target: "48", lineStyle: { normal: {} } }, { id: "239", name: null, source: "74", target: "73", lineStyle: { normal: {} } }, { id: "242", name: null, source: "75", target: "25", lineStyle: { normal: {} } }, { id: "244", name: null, source: "75", target: "41", lineStyle: { normal: {} } }, { id: null, name: null, source: "75", target: "48", lineStyle: { normal: {} } }, { id: "241", name: null, source: "75", target: "68", lineStyle: { normal: {} } }, { id: "240", name: null, source: "75", target: "69", lineStyle: { normal: {} } }, { id: "245", name: null, source: "75", target: "70", lineStyle: { normal: {} } }, { id: "246", name: null, source: "75", target: "71", lineStyle: { normal: {} } }, { id: "252", name: null, source: "76", target: "48", lineStyle: { normal: {} } }, { id: "253", name: null, source: "76", target: "58", lineStyle: { normal: {} } }, { id: "251", name: null, source: "76", target: "62", lineStyle: { normal: {} } }, { id: "250", name: null, source: "76", target: "63", lineStyle: { normal: {} } }, { id: "247", name: null, source: "76", target: "64", lineStyle: { normal: {} } }, { id: "248", name: null, source: "76", target: "65", lineStyle: { normal: {} } }, { id: "249", name: null, source: "76", target: "66", lineStyle: { normal: {} } }, ]; return { nodes: nodes, links: links } } </script> 二、D3拓扑图 <!DOCTYPE html> <meta charset="utf-8"> <title>Radial Dendrogram</title> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@observablehq/notebook-inspector@1/dist/notebook-inspector-style.css"> <body> <div id="console" style=" 100%;"></div> </body> </html> <script type="module"> import { Inspector, Runtime } from "https://unpkg.com/@observablehq/notebook-runtime@1?module"; // URL: https://observablehq.com/@13716164418/radial-dendrogram const m0 = { id: "myId", variables: [ { inputs: ["md"], value: (function (md) { return md`# Radial Dendrogram` }) }, { name: "chart", inputs: ["tree", "d3", "data", "DOM", "width"], value: (function (tree, d3, data, DOM, width) { const root = tree(d3.hierarchy(data) .sort((a, b) => (a.height - b.height) || a.data.name.localeCompare(b.data.name))); const svg = d3.select(DOM.svg(width, width)) .style("width", "100%") .style("height", "auto") .style("padding", "10px") .style("box-sizing", "border-box") .style("font", "10px sans-serif"); const g = svg.append("g"); const link = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .enter().append("path") .attr("d", d3.linkRadial().angle(d => d.x).radius(d => d.y)); const node = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants().reverse()) .enter().append("g") .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`); node.append("circle") .attr("fill", d => d.children ? "#555" : "#999") .attr("r", 2.5); node.append("text") .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") .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null) .text(d => d.data.name) .filter(d => d.children) .clone(true).lower() .attr("stroke", "white"); document.body.appendChild(svg.node()); const box = g.node().getBBox(); svg.remove() .attr("width", box.width) .attr("height", box.height) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); return svg.node(); }) }, { name: "data", inputs: ["require"], value: (function (require) { return require("@observablehq/flare") }) }, { name: "width", value: (function () { return 932 }) }, { name: "radius", inputs: ["width"], value: (function (width) { return width / 2 }) }, { name: "tree", inputs: ["d3", "radius"], value: (function (d3, radius) { return d3.cluster().size([2 * Math.PI, radius - 100]) }) }, { name: "d3", inputs: ["require"], value: (function (require) { return require("d3@5") }) } ] }; const notebook = { id: "myId", modules: [m0] }; export default notebook; Runtime.load(notebook, Inspector.into(document.getElementById("console"))); </script>