d3.js - 如何在 D3.js 中绘制简化的网络图？

Question

我想我可以使用强制布局来绘制我的简化网络图。

我将我的链接设置为具有来自不同来源的不同链接距离的相同目标，但是当我绘制它时，我得到以下图:

该图在技术上是正确的，但我希望左上角的那个点位于中心，其他点从中心以不同的长度向外延伸。

我不应该使用力布局，因为这是一个更简单的可视化吗？我认为力布局会有所帮助，因为它有助于间距，但我想我不太了解它。

代码如下:

    var width = 960,
        height = 500;

    var nodes = [
    {"name":"theta.user","group":0},
    {"name":"theta.robert_abele","group":0},
    {"name":"theta.beth_accomando","group":0},
    {"name":"theta.walter_chaw","group":0},
    {"name":"theta.jeffrey_chen","group":0},
    {"name":"theta.sandie_angulo_chen","group":0},
    {"name":"theta.john_anderson","group":0},
    {"name":"theta.melissa_anderson","group":0},
    {"name":"theta.nigel_andrews","group":0},
    {"name":"theta.erik_childress","group":0},
    {"name":"theta.keith_cohen","group":0},
    {"name":"theta.robbie_collin","group":0},
    {"name":"theta.richard_corliss","group":0},
    {"name":"theta.david_cornelius","group":0},
    {"name":"theta.colin_covert","group":0},
    {"name":"theta.urban_cinefile_critics","group":0},
    {"name":"theta.fernando_f_croce","group":0},
    {"name":"theta.manohla_dargis","group":0},
    {"name":"theta.peter_debruge","group":0},
    {"name":"theta.michael_dequina","group":0},
    {"name":"theta.jeannette_catsoulis","group":0},
    {"name":"theta.duane_dudek","group":0},
    {"name":"theta.mark_dujsik","group":0},
    {"name":"theta.alonso_duralde","group":0},
    {"name":"theta.roger_ebert","group":0},
    {"name":"theta.david_edelstein","group":0},
    {"name":"theta.david_edwards","group":0},
    {"name":"theta.annlee_ellingson","group":0},
    {"name":"theta.tim_evans","group":0},
    {"name":"theta.david_fear","group":0},
    {"name":"theta.sara_m_fetters","group":0},
    {"name":"theta.brandon_fibbs","group":0},
    {"name":"theta.marshall_fine","group":0},
    {"name":"theta.henry_fitzherbert","group":0},
    {"name":"theta.simon_foster","group":0},
    {"name":"theta.ken_fox","group":0},
    {"name":"theta.philip_french","group":0},
    {"name":"theta.cynthia_fuchs","group":0},
    {"name":"theta.kimberly_gadette","group":0},
    {"name":"theta.sean_axmaker","group":0},
    {"name":"theta.bill_gibron","group":0},
    {"name":"theta.sam_adams","group":0},
    {"name":"theta.todd_gilchrist","group":0},
    {"name":"theta.owen_gleiberman","group":0},
    {"name":"theta.gary_goldstein","group":0},
    {"name":"theta.rob_gonsalves","group":0},
    {"name":"theta.ed_gonzalez","group":0},
    {"name":"theta.bill_goodykoontz","group":0},
    {"name":"theta.william_goss","group":0},
    {"name":"theta.susan_granger","group":0},
    {"name":"theta.tim_grierson","group":0},
    {"name":"theta.rick_groen","group":0},
    {"name":"theta.rafer_guzman","group":0},
    {"name":"theta.stefan_halley","group":0},
    {"name":"theta.pete_hammond","group":0},
    {"name":"theta.ken_hanke","group":0},
    {"name":"theta.alistair_harkness","group":0},
    {"name":"theta.john_hartl","group":0},
    {"name":"theta.dennis_harvey","group":0},
    {"name":"theta.ron_henriques","group":0},
    {"name":"theta.linda_barnard","group":0},
    {"name":"theta.lori_hoffman","group":0},
    {"name":"theta.jordan_hoffman","group":0},
    {"name":"theta.stephen_holden","group":0},
    {"name":"theta.kirk_honeycutt","group":0},
    {"name":"theta.ann_hornaday","group":0},
    {"name":"theta.peter_howell","group":0},
    {"name":"theta.rob_humanick","group":0},
    {"name":"theta.allan_hunter","group":0},
    {"name":"theta.chris_barsanti","group":0},
    {"name":"theta.wendy_ide","group":0},
    {"name":"theta.david_jenkins","group":0},
    {"name":"theta.maryann_johanson","group":0},
    {"name":"theta.j_r_jones","group":0},
    {"name":"theta.kimberley_jones","group":0},
    {"name":"theta.todd_jorgenson","group":0},
    {"name":"theta.felix_vasquez_jr","group":0},
    {"name":"theta.jim_judy","group":0},
    {"name":"theta.david_kaplan","group":0},
    {"name":"theta.jeanne_kaplan","group":0},
    {"name":"theta.harvey_s_karten","group":0},
    {"name":"theta.louise_keller","group":0},
    {"name":"theta.james_kendrick","group":0},
    {"name":"theta.ben_kenigsberg","group":0},
    {"name":"theta.austin_kennedy","group":0},
    {"name":"theta.lisa_kennedy","group":0},
    {"name":"theta.glenn_kenny","group":0},
    {"name":"theta.peter_keough","group":0},
    {"name":"theta.daniel_m_kimmel","group":0},
    {"name":"theta.andy_klein","group":0},
    {"name":"theta.marjorie_baumgarten","group":0},
    {"name":"theta.jeff_bayer","group":0},
    {"name":"theta.eric_kohn","group":0},
    {"name":"theta.charles_koplinski","group":0},
    {"name":"theta.liam_lacey","group":0},
    {"name":"theta.jim_lane","group":0},
    {"name":"theta.josh_larsen","group":0},
    {"name":"theta.mick_lasalle","group":0},
    {"name":"theta.jeff_beck","group":0},
    {"name":"theta.mark_r_leeper","group":0},
    {"name":"theta.christy_lemire","group":0},
    {"name":"theta.vince_leo","group":0},
    {"name":"theta.robert_levin","group":0},
    {"name":"theta.john_beifuss","group":0},
    {"name":"theta.josh_bell","group":0},
    {"name":"theta.bruce_bennett","group":0},
    {"name":"theta.james_berardinelli","group":0},
    {"name":"theta.geoff_berkshire","group":0},
    {"name":"theta.jason_best","group":0},
    {"name":"theta.amy_biancolli","group":0},
    {"name":"theta.anton_bitel","group":0},
    {"name":"theta.sarah_boslaugh","group":0},
    {"name":"theta.peter_bradshaw","group":0},
    {"name":"theta.victoria_alexander","group":0},
    {"name":"theta.liz_braun","group":0},
    {"name":"theta.tim_brayton","group":0},
    {"name":"theta.jules_brenner","group":0},
    {"name":"theta.brad_brevet","group":0},
    {"name":"theta.matt_brunson","group":0},
    {"name":"theta.frederic_and_mary_ann_brussat","group":0},
    {"name":"theta.ian_buckwalter","group":0},
    {"name":"theta.chris_bumbray","group":0},
    {"name":"theta.ty_burr","group":0},
    {"name":"theta.robert_w_butler","group":0},
    {"name":"theta.chris_cabin","group":0},
    {"name":"theta.thomas_caldwell","group":0},
    {"name":"theta.dave_calhoun","group":0},
    {"name":"theta.ethan_alter","group":0},
    {"name":"theta.jeffrey_m_anderson","group":0},
    {"name":"theta.peter_canavese","group":0},
    {"name":"theta.fr_chris_carpenter","group":0},
    {"name":"theta.kevin_carr","group":0},
    {"name":"theta.robert_cashill","group":0},
    {"name":"theta.andrea_chase","group":0},
    {"name":"theta.edward_douglas","group":0},
    {"name":"theta.laura_clifford","group":0},
    {"name":"theta.robin_clifford","group":0},
    {"name":"theta.rich_cline","group":0}
    ];

    var links = [
    {"source":1,"target":0,"value":4.26038537711245},
    {"source":2,"target":0,"value":17.3580222973762},
    {"source":3,"target":0,"value":20.6964524920459},
    {"source":4,"target":0,"value":16.2847770534097},
    {"source":5,"target":0,"value":40.0060228237347},
    {"source":6,"target":0,"value":8.13705087910032},
    {"source":7,"target":0,"value":16.3637138134267},
    {"source":8,"target":0,"value":1.09035018475025},
    {"source":9,"target":0,"value":1.04534541035265},
    {"source":10,"target":0,"value":39.933241650885},
    {"source":11,"target":0,"value":13.3131300555653},
    {"source":12,"target":0,"value":14.2118824383338},
    {"source":13,"target":0,"value":8.90843783026452},
    {"source":14,"target":0,"value":15.8840539859429},
    {"source":15,"target":0,"value":31.8081146948469},
    {"source":16,"target":0,"value":44.6739620043804},
    {"source":17,"target":0,"value":8.45675399871445},
    {"source":18,"target":0,"value":16.4594886693694},
    {"source":19,"target":0,"value":17.5908766165014},
    {"source":20,"target":0,"value":9.17782078123971},
    {"source":21,"target":0,"value":12.9246516757352},
    {"source":22,"target":0,"value":3.98547949515715},
    {"source":23,"target":0,"value":0.9570178380801},
    {"source":24,"target":0,"value":17.0362047226755},
    {"source":25,"target":0,"value":8.69302923576499},
    {"source":26,"target":0,"value":20.6563648143096},
    {"source":27,"target":0,"value":24.4304077973663},
    {"source":28,"target":0,"value":37.839869249526},
    {"source":29,"target":0,"value":12.5886569480546},
    {"source":30,"target":0,"value":15.7190110621586},
    {"source":31,"target":0,"value":23.8796969827073},
    {"source":32,"target":0,"value":10.9220207489842},
    {"source":33,"target":0,"value":20.9925517455825},
    {"source":34,"target":0,"value":13.3275382008263},
    {"source":35,"target":0,"value":23.9897878917892},
    {"source":36,"target":0,"value":7.39305974663075},
    {"source":37,"target":0,"value":8.3147992804349},
    {"source":38,"target":0,"value":3.2782211643749},
    {"source":39,"target":0,"value":14.3471619015601},
    {"source":40,"target":0,"value":14.607423892229},
    {"source":41,"target":0,"value":2.10211822479985},
    {"source":42,"target":0,"value":20.8749418049529},
    {"source":43,"target":0,"value":26.8571622764211},
    {"source":44,"target":0,"value":40.4695014542694},
    {"source":45,"target":0,"value":28.2866560712318},
    {"source":46,"target":0,"value":3.0745876201296},
    {"source":47,"target":0,"value":26.5241887332719},
    {"source":48,"target":0,"value":20.1410557121406},
    {"source":49,"target":0,"value":16.4235539611162},
    {"source":50,"target":0,"value":6.82240391248583},
    {"source":51,"target":0,"value":2.7547026115441},
    {"source":52,"target":0,"value":12.3358907110885},
    {"source":53,"target":0,"value":26.5928398050958},
    {"source":54,"target":0,"value":47.8140685782048},
    {"source":55,"target":0,"value":18.6570911469926},
    {"source":56,"target":0,"value":2.4187387634277},
    {"source":57,"target":0,"value":18.0200795123642},
    {"source":58,"target":0,"value":11.8860135966131},
    {"source":59,"target":0,"value":17.8923726147912},
    {"source":60,"target":0,"value":16.7869452179879},
    {"source":61,"target":0,"value":22.2505435818131},
    {"source":62,"target":0,"value":11.035061213967},
    {"source":63,"target":0,"value":12.7892712133684},
    {"source":64,"target":0,"value":15.1916347199152},
    {"source":65,"target":0,"value":13.5436557884876},
    {"source":66,"target":0,"value":16.0501195618133},
    {"source":67,"target":0,"value":0.27256255487025},
    {"source":68,"target":0,"value":29.8635787146166},
    {"source":69,"target":0,"value":0.134078581807599},
    {"source":70,"target":0,"value":9.00294709430286},
    {"source":71,"target":0,"value":11.7345855060347},
    {"source":72,"target":0,"value":17.0544801697484},
    {"source":73,"target":0,"value":4.55432519996712},
    {"source":74,"target":0,"value":9.64177050321904},
    {"source":75,"target":0,"value":0.738966616445651},
    {"source":76,"target":0,"value":18.3035434298714},
    {"source":77,"target":0,"value":18.5872942715844},
    {"source":78,"target":0,"value":19.5858233092463},
    {"source":79,"target":0,"value":23.0650882595925},
    {"source":80,"target":0,"value":29.0675105794329},
    {"source":81,"target":0,"value":43.1514869381689},
    {"source":82,"target":0,"value":7.23453444918731},
    {"source":83,"target":0,"value":0.656011764485599},
    {"source":84,"target":0,"value":7.45687257556842},
    {"source":85,"target":0,"value":28.134498702339},
    {"source":86,"target":0,"value":17.9661419326558},
    {"source":87,"target":0,"value":6.82580875847515},
    {"source":88,"target":0,"value":23.5784095345731},
    {"source":89,"target":0,"value":17.7316800503962},
    {"source":90,"target":0,"value":0.427163619608099},
    {"source":91,"target":0,"value":17.8958653452833},
    {"source":92,"target":0,"value":13.5622177432906},
    {"source":93,"target":0,"value":18.3256731875727},
    {"source":94,"target":0,"value":3.45369077131375},
    {"source":95,"target":0,"value":20.188554573031},
    {"source":96,"target":0,"value":10.3095692331574},
    {"source":97,"target":0,"value":15.3473966679705},
    {"source":98,"target":0,"value":1.3313817961123},
    {"source":99,"target":0,"value":20.1399319227806},
    {"source":100,"target":0,"value":7.77757617043179},
    {"source":101,"target":0,"value":17.892480363265},
    {"source":102,"target":0,"value":8.64756633244994},
    {"source":103,"target":0,"value":10.2258146125357},
    {"source":104,"target":0,"value":10.3879231528118},
    {"source":105,"target":0,"value":24.3247047528438},
    {"source":106,"target":0,"value":11.8448575251716},
    {"source":107,"target":0,"value":10.4686132417169},
    {"source":108,"target":0,"value":22.8061556118863},
    {"source":109,"target":0,"value":23.422005079676},
    {"source":110,"target":0,"value":14.5426741493693},
    {"source":111,"target":0,"value":4.78130088307499},
    {"source":112,"target":0,"value":1.23992734195325},
    {"source":113,"target":0,"value":15.9313311025206},
    {"source":114,"target":0,"value":34.3469962058894},
    {"source":115,"target":0,"value":3.21245144524595},
    {"source":116,"target":0,"value":26.9231265656747},
    {"source":117,"target":0,"value":2.00613486730785},
    {"source":118,"target":0,"value":8.32021802787683},
    {"source":119,"target":0,"value":28.23662160774},
    {"source":120,"target":0,"value":11.5284198860929},
    {"source":121,"target":0,"value":29.3986700861953},
    {"source":122,"target":0,"value":8.10845255970479},
    {"source":123,"target":0,"value":12.4621902430389},
    {"source":124,"target":0,"value":9.6539737639784},
    {"source":125,"target":0,"value":26.6512764857012},
    {"source":126,"target":0,"value":17.7896370917579},
    {"source":127,"target":0,"value":2.4887414976103},
    {"source":128,"target":0,"value":13.1527326804752},
    {"source":129,"target":0,"value":11.5199280568752},
    {"source":130,"target":0,"value":29.0704034553148},
    {"source":131,"target":0,"value":24.1771454898162},
    {"source":132,"target":0,"value":5.47707949781455},
    {"source":133,"target":0,"value":26.1669524475583},
    {"source":134,"target":0,"value":21.9240176232905},
    {"source":135,"target":0,"value":16.2258432905263},
    {"source":136,"target":0,"value":22.2689278938644},
    {"source":137,"target":0,"value":36.919843110684}
    ];

    var n = 100;

    var force = d3.layout.force()
      .nodes(nodes)
      .links(links)
      .linkDistance(function() { return this.value; })
      .size([width, height]);

    var svg = d3.select("#vis").append("svg") // d3.select("#vis")
      .attr("width", width)
      .attr("height", height);

    var loading = svg.append("text")
      .attr("x", width / 2)
      .attr("y", height / 2)
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text("simulating. one moment please…");

    // Run the layout a fixed number of times.
    // The ideal number of times scales with graph complexity.
    // Of course, don't run too long—you'll hang the page!
    force.start();
    for (var i = n * n; i > 0; --i) {
      force.tick()
    }
    force.stop();

    svg.selectAll("line")
        .data(links)
      .enter().append("line")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    svg.selectAll("circle")
        .data(nodes)
      .enter().append("circle")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", 4.5);

    loading.remove();

Answer 1

问题是在链接距离函数中，您使用的是 this 而不是数据元素 d。正确代码:

var force = d3.layout.force()
  .nodes(nodes)
  .links(links)
  .linkDistance(function(d) { return d.value; })
  .size([width, height]);

我写了一个jsFiddle用你的代码。结果或多或少是你所期望的。问候