style>.node { stroke: #fff; stroke-width: 1.5px;}.link { stroke: #999; stroke-opacity: .6;}style>body>script src="http://d3js.org/d3.v3.min.js">script>script>_miserables.json d3">
devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

d3 Force-Directed Graph example_miserables.json d3

作者：我家小花儿 | 2024-02-23 01:34:31

赞

踩

miserables.json d3
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <style>
  4.  
  5. .node {
  6.   stroke: #fff;
  7.   stroke-width: 1.5px;
  8. }
  9.  
  10. .link {
  11.   stroke: #999;
  12.   stroke-opacity: .6;
  13. }
  14.  
  15. </style>
  16. <body>
  17. <script src="http://d3js.org/d3.v3.min.js"></script>
  18. <script>
  19.  
  20. var width = 960,
  21.     height = 500;
  22.  
  23. var color = d3.scale.category20();
  24.  
  25. var force = d3.layout.force()
  26.     .charge(-120)
  27.     .linkDistance(30)
  28.     .size([width, height]);
  29.  
  30. var svg = d3.select("body").append("svg")
  31.     .attr("width", width)
  32.     .attr("height", height);
  33.  
  34. d3.json("miserables.json", function(error, graph) {
  35.   force
  36.       .nodes(graph.nodes)
  37.       .links(graph.links)
  38.       .start();
  39.  
  40.   var link = svg.selectAll(".link")
  41.       .data(graph.links)
  42.     .enter().append("line")
  43.       .attr("class", "link")
  44.       .style("stroke-width", function(d) { return Math.sqrt(d.value); });
  45.  
  46.   var node = svg.selectAll(".node")
  47.       .data(graph.nodes)
  48.     .enter().append("circle")
  49.       .attr("class", "node")
  50.       .attr("r", 5)
  51.       .style("fill", function(d) { return color(d.group); })
  52.       .call(force.drag);
  53.  
  54.   node.append("title")
  55.       .text(function(d) { return d.name; });
  56.  
  57.   force.on("tick", function() {
  58.     link.attr("x1", function(d) { return d.source.x; })
  59.         .attr("y1", function(d) { return d.source.y; })
  60.         .attr("x2", function(d) { return d.target.x; })
  61.         .attr("y2", function(d) { return d.target.y; });
  62.  
  63.     node.attr("cx", function(d) { return d.x; })
  64.         .attr("cy", function(d) { return d.y; });
  65.   });
  66. });
  67.  
  68. </script>

miserables.json#

  1. {
  2.   "nodes":[
  3.     {"name":"Myriel","group":1},
  4.     {"name":"Napoleon","group":1},
  5.     {"name":"Mlle.Baptistine","group":1},
  6.     {"name":"Mme.Magloire","group":1},
  7.     {"name":"CountessdeLo","group":1},
  8.     {"name":"Geborand","group":1},
  9.     {"name":"Champtercier","group":1},
  10.     {"name":"Cravatte","group":1},
  11.     {"name":"Count","group":1},
  12.     {"name":"OldMan","group":1},
  13.     {"name":"Labarre","group":2},
  14.     {"name":"Valjean","group":2},
  15.     {"name":"Marguerite","group":3},
  16.     {"name":"Mme.deR","group":2},
  17.     {"name":"Isabeau","group":2},
  18.     {"name":"Gervais","group":2},
  19.     {"name":"Tholomyes","group":3},
  20.     {"name":"Listolier","group":3},
  21.     {"name":"Fameuil","group":3},
  22.     {"name":"Blacheville","group":3},
  23.     {"name":"Favourite","group":3},
  24.     {"name":"Dahlia","group":3},
  25.     {"name":"Zephine","group":3},
  26.     {"name":"Fantine","group":3},
  27.     {"name":"Mme.Thenardier","group":4},
  28.     {"name":"Thenardier","group":4},
  29.     {"name":"Cosette","group":5},
  30.     {"name":"Javert","group":4},
  31.     {"name":"Fauchelevent","group":0},
  32.     {"name":"Bamatabois","group":2},
  33.     {"name":"Perpetue","group":3},
  34.     {"name":"Simplice","group":2},
  35.     {"name":"Scaufflaire","group":2},
  36.     {"name":"Woman1","group":2},
  37.     {"name":"Judge","group":2},
  38.     {"name":"Champmathieu","group":2},
  39.     {"name":"Brevet","group":2},
  40.     {"name":"Chenildieu","group":2},
  41.     {"name":"Cochepaille","group":2},
  42.     {"name":"Pontmercy","group":4},
  43.     {"name":"Boulatruelle","group":6},
  44.     {"name":"Eponine","group":4},
  45.     {"name":"Anzelma","group":4},
  46.     {"name":"Woman2","group":5},
  47.     {"name":"MotherInnocent","group":0},
  48.     {"name":"Gribier","group":0},
  49.     {"name":"Jondrette","group":7},
  50.     {"name":"Mme.Burgon","group":7},
  51.     {"name":"Gavroche","group":8},
  52.     {"name":"Gillenormand","group":5},
  53.     {"name":"Magnon","group":5},
  54.     {"name":"Mlle.Gillenormand","group":5},
  55.     {"name":"Mme.Pontmercy","group":5},
  56.     {"name":"Mlle.Vaubois","group":5},
  57.     {"name":"Lt.Gillenormand","group":5},
  58.     {"name":"Marius","group":8},
  59.     {"name":"BaronessT","group":5},
  60.     {"name":"Mabeuf","group":8},
  61.     {"name":"Enjolras","group":8},
  62.     {"name":"Combeferre","group":8},
  63.     {"name":"Prouvaire","group":8},
  64.     {"name":"Feuilly","group":8},
  65.     {"name":"Courfeyrac","group":8},
  66.     {"name":"Bahorel","group":8},
  67.     {"name":"Bossuet","group":8},
  68.     {"name":"Joly","group":8},
  69.     {"name":"Grantaire","group":8},
  70.     {"name":"MotherPlutarch","group":9},
  71.     {"name":"Gueulemer","group":4},
  72.     {"name":"Babet","group":4},
  73.     {"name":"Claquesous","group":4},
  74.     {"name":"Montparnasse","group":4},
  75.     {"name":"Toussaint","group":5},
  76.     {"name":"Child1","group":10},
  77.     {"name":"Child2","group":10},
  78.     {"name":"Brujon","group":4},
  79.     {"name":"Mme.Hucheloup","group":8}
  80.   ],
  81.   "links":[
  82.     {"source":1,"target":0,"value":1},
  83.     {"source":2,"target":0,"value":8},
  84.     {"source":3,"target":0,"value":10},
  85.     {"source":3,"target":2,"value":6},
  86.     {"source":4,"target":0,"value":1},
  87.     {"source":5,"target":0,"value":1},
  88.     {"source":6,"target":0,"value":1},
  89.     {"source":7,"target":0,"value":1},
  90.     {"source":8,"target":0,"value":2},
  91.     {"source":9,"target":0,"value":1},
  92.     {"source":11,"target":10,"value":1},
  93.     {"source":11,"target":3,"value":3},
  94.     {"source":11,"target":2,"value":3},
  95.     {"source":11,"target":0,"value":5},
  96.     {"source":12,"target":11,"value":1},
  97.     {"source":13,"target":11,"value":1},
  98.     {"source":14,"target":11,"value":1},
  99.     {"source":15,"target":11,"value":1},
  100.     {"source":17,"target":16,"value":4},
  101.     {"source":18,"target":16,"value":4},
  102.     {"source":18,"target":17,"value":4},
  103.     {"source":19,"target":16,"value":4},
  104.     {"source":19,"target":17,"value":4},
  105.     {"source":19,"target":18,"value":4},
  106.     {"source":20,"target":16,"value":3},
  107.     {"source":20,"target":17,"value":3},
  108.     {"source":20,"target":18,"value":3},
  109.     {"source":20,"target":19,"value":4},
  110.     {"source":21,"target":16,"value":3},
  111.     {"source":21,"target":17,"value":3},
  112.     {"source":21,"target":18,"value":3},
  113.     {"source":21,"target":19,"value":3},
  114.     {"source":21,"target":20,"value":5},
  115.     {"source":22,"target":16,"value":3},
  116.     {"source":22,"target":17,"value":3},
  117.     {"source":22,"target":18,"value":3},
  118.     {"source":22,"target":19,"value":3},
  119.     {"source":22,"target":20,"value":4},
  120.     {"source":22,"target":21,"value":4},
  121.     {"source":23,"target":16,"value":3},
  122.     {"source":23,"target":17,"value":3},
  123.     {"source":23,"target":18,"value":3},
  124.     {"source":23,"target":19,"value":3},
  125.     {"source":23,"target":20,"value":4},
  126.     {"source":23,"target":21,"value":4},
  127.     {"source":23,"target":22,"value":4},
  128.     {"source":23,"target":12,"value":2},
  129.     {"source":23,"target":11,"value":9},
  130.     {"source":24,"target":23,"value":2},
  131.     {"source":24,"target":11,"value":7},
  132.     {"source":25,"target":24,"value":13},
  133.     {"source":25,"target":23,"value":1},
  134.     {"source":25,"target":11,"value":12},
  135.     {"source":26,"target":24,"value":4},
  136.     {"source":26,"target":11,"value":31},
  137.     {"source":26,"target":16,"value":1},
  138.     {"source":26,"target":25,"value":1},
  139.     {"source":27,"target":11,"value":17},
  140.     {"source":27,"target":23,"value":5},
  141.     {"source":27,"target":25,"value":5},
  142.     {"source":27,"target":24,"value":1},
  143.     {"source":27,"target":26,"value":1},
  144.     {"source":28,"target":11,"value":8},
  145.     {"source":28,"target":27,"value":1},
  146.     {"source":29,"target":23,"value":1},
  147.     {"source":29,"target":27,"value":1},
  148.     {"source":29,"target":11,"value":2},
  149.     {"source":30,"target":23,"value":1},
  150.     {"source":31,"target":30,"value":2},
  151.     {"source":31,"target":11,"value":3},
  152.     {"source":31,"target":23,"value":2},
  153.     {"source":31,"target":27,"value":1},
  154.     {"source":32,"target":11,"value":1},
  155.     {"source":33,"target":11,"value":2},
  156.     {"source":33,"target":27,"value":1},
  157.     {"source":34,"target":11,"value":3},
  158.     {"source":34,"target":29,"value":2},
  159.     {"source":35,"target":11,"value":3},
  160.     {"source":35,"target":34,"value":3},
  161.     {"source":35,"target":29,"value":2},
  162.     {"source":36,"target":34,"value":2},
  163.     {"source":36,"target":35,"value":2},
  164.     {"source":36,"target":11,"value":2},
  165.     {"source":36,"target":29,"value":1},
  166.     {"source":37,"target":34,"value":2},
  167.     {"source":37,"target":35,"value":2},
  168.     {"source":37,"target":36,"value":2},
  169.     {"source":37,"target":11,"value":2},
  170.     {"source":37,"target":29,"value":1},
  171.     {"source":38,"target":34,"value":2},
  172.     {"source":38,"target":35,"value":2},
  173.     {"source":38,"target":36,"value":2},
  174.     {"source":38,"target":37,"value":2},
  175.     {"source":38,"target":11,"value":2},
  176.     {"source":38,"target":29,"value":1},
  177.     {"source":39,"target":25,"value":1},
  178.     {"source":40,"target":25,"value":1},
  179.     {"source":41,"target":24,"value":2},
  180.     {"source":41,"target":25,"value":3},
  181.     {"source":42,"target":41,"value":2},
  182.     {"source":42,"target":25,"value":2},
  183.     {"source":42,"target":24,"value":1},
  184.     {"source":43,"target":11,"value":3},
  185.     {"source":43,"target":26,"value":1},
  186.     {"source":43,"target":27,"value":1},
  187.     {"source":44,"target":28,"value":3},
  188.     {"source":44,"target":11,"value":1},
  189.     {"source":45,"target":28,"value":2},
  190.     {"source":47,"target":46,"value":1},
  191.     {"source":48,"target":47,"value":2},
  192.     {"source":48,"target":25,"value":1},
  193.     {"source":48,"target":27,"value":1},
  194.     {"source":48,"target":11,"value":1},
  195.     {"source":49,"target":26,"value":3},
  196.     {"source":49,"target":11,"value":2},
  197.     {"source":50,"target":49,"value":1},
  198.     {"source":50,"target":24,"value":1},
  199.     {"source":51,"target":49,"value":9},
  200.     {"source":51,"target":26,"value":2},
  201.     {"source":51,"target":11,"value":2},
  202.     {"source":52,"target":51,"value":1},
  203.     {"source":52,"target":39,"value":1},
  204.     {"source":53,"target":51,"value":1},
  205.     {"source":54,"target":51,"value":2},
  206.     {"source":54,"target":49,"value":1},
  207.     {"source":54,"target":26,"value":1},
  208.     {"source":55,"target":51,"value":6},
  209.     {"source":55,"target":49,"value":12},
  210.     {"source":55,"target":39,"value":1},
  211.     {"source":55,"target":54,"value":1},
  212.     {"source":55,"target":26,"value":21},
  213.     {"source":55,"target":11,"value":19},
  214.     {"source":55,"target":16,"value":1},
  215.     {"source":55,"target":25,"value":2},
  216.     {"source":55,"target":41,"value":5},
  217.     {"source":55,"target":48,"value":4},
  218.     {"source":56,"target":49,"value":1},
  219.     {"source":56,"target":55,"value":1},
  220.     {"source":57,"target":55,"value":1},
  221.     {"source":57,"target":41,"value":1},
  222.     {"source":57,"target":48,"value":1},
  223.     {"source":58,"target":55,"value":7},
  224.     {"source":58,"target":48,"value":7},
  225.     {"source":58,"target":27,"value":6},
  226.     {"source":58,"target":57,"value":1},
  227.     {"source":58,"target":11,"value":4},
  228.     {"source":59,"target":58,"value":15},
  229.     {"source":59,"target":55,"value":5},
  230.     {"source":59,"target":48,"value":6},
  231.     {"source":59,"target":57,"value":2},
  232.     {"source":60,"target":48,"value":1},
  233.     {"source":60,"target":58,"value":4},
  234.     {"source":60,"target":59,"value":2},
  235.     {"source":61,"target":48,"value":2},
  236.     {"source":61,"target":58,"value":6},
  237.     {"source":61,"target":60,"value":2},
  238.     {"source":61,"target":59,"value":5},
  239.     {"source":61,"target":57,"value":1},
  240.     {"source":61,"target":55,"value":1},
  241.     {"source":62,"target":55,"value":9},
  242.     {"source":62,"target":58,"value":17},
  243.     {"source":62,"target":59,"value":13},
  244.     {"source":62,"target":48,"value":7},
  245.     {"source":62,"target":57,"value":2},
  246.     {"source":62,"target":41,"value":1},
  247.     {"source":62,"target":61,"value":6},
  248.     {"source":62,"target":60,"value":3},
  249.     {"source":63,"target":59,"value":5},
  250.     {"source":63,"target":48,"value":5},
  251.     {"source":63,"target":62,"value":6},
  252.     {"source":63,"target":57,"value":2},
  253.     {"source":63,"target":58,"value":4},
  254.     {"source":63,"target":61,"value":3},
  255.     {"source":63,"target":60,"value":2},
  256.     {"source":63,"target":55,"value":1},
  257.     {"source":64,"target":55,"value":5},
  258.     {"source":64,"target":62,"value":12},
  259.     {"source":64,"target":48,"value":5},
  260.     {"source":64,"target":63,"value":4},
  261.     {"source":64,"target":58,"value":10},
  262.     {"source":64,"target":61,"value":6},
  263.     {"source":64,"target":60,"value":2},
  264.     {"source":64,"target":59,"value":9},
  265.     {"source":64,"target":57,"value":1},
  266.     {"source":64,"target":11,"value":1},
  267.     {"source":65,"target":63,"value":5},
  268.     {"source":65,"target":64,"value":7},
  269.     {"source":65,"target":48,"value":3},
  270.     {"source":65,"target":62,"value":5},
  271.     {"source":65,"target":58,"value":5},
  272.     {"source":65,"target":61,"value":5},
  273.     {"source":65,"target":60,"value":2},
  274.     {"source":65,"target":59,"value":5},
  275.     {"source":65,"target":57,"value":1},
  276.     {"source":65,"target":55,"value":2},
  277.     {"source":66,"target":64,"value":3},
  278.     {"source":66,"target":58,"value":3},
  279.     {"source":66,"target":59,"value":1},
  280.     {"source":66,"target":62,"value":2},
  281.     {"source":66,"target":65,"value":2},
  282.     {"source":66,"target":48,"value":1},
  283.     {"source":66,"target":63,"value":1},
  284.     {"source":66,"target":61,"value":1},
  285.     {"source":66,"target":60,"value":1},
  286.     {"source":67,"target":57,"value":3},
  287.     {"source":68,"target":25,"value":5},
  288.     {"source":68,"target":11,"value":1},
  289.     {"source":68,"target":24,"value":1},
  290.     {"source":68,"target":27,"value":1},
  291.     {"source":68,"target":48,"value":1},
  292.     {"source":68,"target":41,"value":1},
  293.     {"source":69,"target":25,"value":6},
  294.     {"source":69,"target":68,"value":6},
  295.     {"source":69,"target":11,"value":1},
  296.     {"source":69,"target":24,"value":1},
  297.     {"source":69,"target":27,"value":2},
  298.     {"source":69,"target":48,"value":1},
  299.     {"source":69,"target":41,"value":1},
  300.     {"source":70,"target":25,"value":4},
  301.     {"source":70,"target":69,"value":4},
  302.     {"source":70,"target":68,"value":4},
  303.     {"source":70,"target":11,"value":1},
  304.     {"source":70,"target":24,"value":1},
  305.     {"source":70,"target":27,"value":1},
  306.     {"source":70,"target":41,"value":1},
  307.     {"source":70,"target":58,"value":1},
  308.     {"source":71,"target":27,"value":1},
  309.     {"source":71,"target":69,"value":2},
  310.     {"source":71,"target":68,"value":2},
  311.     {"source":71,"target":70,"value":2},
  312.     {"source":71,"target":11,"value":1},
  313.     {"source":71,"target":48,"value":1},
  314.     {"source":71,"target":41,"value":1},
  315.     {"source":71,"target":25,"value":1},
  316.     {"source":72,"target":26,"value":2},
  317.     {"source":72,"target":27,"value":1},
  318.     {"source":72,"target":11,"value":1},
  319.     {"source":73,"target":48,"value":2},
  320.     {"source":74,"target":48,"value":2},
  321.     {"source":74,"target":73,"value":3},
  322.     {"source":75,"target":69,"value":3},
  323.     {"source":75,"target":68,"value":3},
  324.     {"source":75,"target":25,"value":3},
  325.     {"source":75,"target":48,"value":1},
  326.     {"source":75,"target":41,"value":1},
  327.     {"source":75,"target":70,"value":1},
  328.     {"source":75,"target":71,"value":1},
  329.     {"source":76,"target":64,"value":1},
  330.     {"source":76,"target":65,"value":1},
  331.     {"source":76,"target":66,"value":1},
  332.     {"source":76,"target":63,"value":1},
  333.     {"source":76,"target":62,"value":1},
  334.     {"source":76,"target":48,"value":1},
  335.     {"source":76,"target":58,"value":1}
  336.   ]
  337. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/132736
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号