我正在尝试使用d3库创建一个Web，但图标正在从节点中浮动，
如何让图标以节点为中心？
我阅读了这两篇文章以供参考http://bl.ocks.org/950642和http://bl.ocks.org/mbostock/1153292
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script> <script>
</head>
<style>
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
#licensing {
fill: green;
}
.link.licensing {
stroke: green;
}
.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
</style>
<body>
<script>
var links = [
{source: "0xroot", target: "0xroot", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000649639863/7648d0ff5600263de2ec9af38f15dece_normal.jpeg"},
{source: "0xroot", target: "ggreenwald", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000649639863/7648d0ff5600263de2ec9af38f15dece_normal.jpeg"},
{source: "0xroot", target: "matthew_d_green", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000649639863/7648d0ff5600263de2ec9af38f15dece_normal.jpeg"},
{source: "8EJ3", target: "8EJ3", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000784873356/4301660eb94dc0d8aca990de498f521c_normal.jpeg"},
{source: "8EJ3", target: "JavaScriptDaily", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000784873356/4301660eb94dc0d8aca990de498f521c_normal.jpeg"},
{source: "8EJ3", target: "Motorola", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000784873356/4301660eb94dc0d8aca990de498f521c_normal.jpeg"},
{source: "8EJ3", target: "ericries", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000784873356/4301660eb94dc0d8aca990de498f521c_normal.jpeg"},
{source: "8EJ3", target: "google", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000784873356/4301660eb94dc0d8aca990de498f521c_normal.jpeg"},
{source: "8EJ3", target: "jeresig", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000784873356/4301660eb94dc0d8aca990de498f521c_normal.jpeg"},
{source: "ACLU", target: "ACLU", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000613943683/c1f05a5f757b2a3e66f9ee78bc1fb10e_normal.jpeg"},
{source: "ACLU", target: "BarackObama", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000613943683/c1f05a5f757b2a3e66f9ee78bc1fb10e_normal.jpeg"},
{source: "ACLU", target: "CNN", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000613943683/c1f05a5f757b2a3e66f9ee78bc1fb10e_normal.jpeg"},
{source: "ACLU", target: "PPact", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000613943683/c1f05a5f757b2a3e66f9ee78bc1fb10e_normal.jpeg"},
{source: "ACLU", target: "WhiteHouse", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000613943683/c1f05a5f757b2a3e66f9ee78bc1fb10e_normal.jpeg"},
{source: "ACLU", target: "ggreenwald", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000613943683/c1f05a5f757b2a3e66f9ee78bc1fb10e_normal.jpeg"},
{source: "AlanTuringYears", target: "AlanTuringYears", type: "licensing", icon: "http://pbs.twimg.com/profile_images/429605463798214656/xoKJagDR_normal.jpeg"},
{source: "AlanTuringYears", target: "NatGeo", type: "licensing", icon: "http://pbs.twimg.com/profile_images/429605463798214656/xoKJagDR_normal.jpeg"},
{source: "AlanTuringYears", target: "pinknews", type: "licensing", icon: "http://pbs.twimg.com/profile_images/429605463798214656/xoKJagDR_normal.jpeg"},
{source: "ArgonneNE", target: "argonne", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1186538427/41781_161539917196623_8678_n_normal.jpg"},
{source: "BNBuzz", target: "BNBuzz", type: "licensing", icon: "http://pbs.twimg.com/profile_images/2241460958/BN_Profile_180x180_normal.jpg"},
{source: "BWBootstrap", target: "BWBootstrap", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1901223069/png_normal.png"},
{source: "BarackObama", target: "FLOTUS", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000607588261/dad9f009a228a78a14f1f4bed0c54f76_normal.png"},
{source: "BarackObama", target: "WhiteHouse", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000607588261/dad9f009a228a78a14f1f4bed0c54f76_normal.png"},
{source: "BestJSON", target: "BestJSON", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000032876560/9f356c988fc558144d2ebd1b2147c93c_normal.jpeg"},
{source: "BestJSON", target: "java", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000032876560/9f356c988fc558144d2ebd1b2147c93c_normal.jpeg"},
{source: "BillGates", target: "BillGates", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1884069342/BGtwitter_normal.JPG"},
{source: "BillGates", target: "billclinton", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1884069342/BGtwitter_normal.JPG"},
{source: "Bitcoin", target: "Bitcoin", type: "licensing", icon: "http://pbs.twimg.com/profile_images/421692600446619648/dWAbC2wg_normal.jpeg"},
{source: "BootSnipp", target: "BootSnipp", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000689218141/331feffd6ccf6771b77b1eae450b194f_normal.jpeg"},
{source: "ButchOtter", target: "ButchOtter", type: "licensing", icon: "http://pbs.twimg.com/profile_images/190575583/butch_normal.png"},
{source: "ButchOtter", target: "YouTube", type: "licensing", icon: "http://pbs.twimg.com/profile_images/190575583/butch_normal.png"},
{source: "CNN", target: "CNN", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000049679889/9097753c470683f49aa12a6c15eba5c7_normal.jpeg"},
{source: "CNN", target: "StateDept", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000049679889/9097753c470683f49aa12a6c15eba5c7_normal.jpeg"},
{source: "CNN", target: "andersoncooper", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000049679889/9097753c470683f49aa12a6c15eba5c7_normal.jpeg"},
{source: "CNN", target: "ggreenwald", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000049679889/9097753c470683f49aa12a6c15eba5c7_normal.jpeg"},
{source: "CNN", target: "katyperry", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000049679889/9097753c470683f49aa12a6c15eba5c7_normal.jpeg"},
{source: "CNN", target: "piersmorgan", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000049679889/9097753c470683f49aa12a6c15eba5c7_normal.jpeg"},
{source: "CNN", target: "wolfblitzer", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000049679889/9097753c470683f49aa12a6c15eba5c7_normal.jpeg"},
{source: "CapehartJ", target: "CapehartJ", type: "licensing", icon: "http://pbs.twimg.com/profile_images/416940271431991296/Iq7xMzOD_normal.jpeg"},
{source: "CapehartJ", target: "Lawrence", type: "licensing", icon: "http://pbs.twimg.com/profile_images/416940271431991296/Iq7xMzOD_normal.jpeg"},
{source: "CapehartJ", target: "TheLastWord", type: "licensing", icon: "http://pbs.twimg.com/profile_images/416940271431991296/Iq7xMzOD_normal.jpeg"},
{source: "CapehartJ", target: "samsteinhp", type: "licensing", icon: "http://pbs.twimg.com/profile_images/416940271431991296/Iq7xMzOD_normal.jpeg"},
{source: "ChelseaClinton", target: "BarackObama", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "BillGates", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "ChelseaClinton", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "ClintonFdn", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "NASA", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "NatGeo", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "UN", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "WhiteHouse", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "billclinton", type: "licensing", icon: "http://pbs.twimg.com/profile_images/78800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChelseaClinton", target: "politico", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000585393780/44a5a5cf6e2e6a8012e549495572a83b_normal.jpeg"},
{source: "ChrisKingRMusic", target: "ChrisKingRMusic", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000847696645/a5994b403ff9cd8dbfd21205e6af85c5_normal.jpeg"},
{source: "ClimateReality", target: "ClimateReality", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1645361959/globeonlytm_normal.png"},
{source: "ClimateReality", target: "WhiteHouse", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1645361959/globeonlytm_normal.png"},
{source: "ClimateReality", target: "algore", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1645361959/globeonlytm_normal.png"},
{source: "ClintonFdn", target: "ClintonFdn", type: "licensing", icon: "http://pbs.twimg.com/profile_images/2456262742/u0oizrwxn6ovjtrim2p4_normal.jpeg"},
{source: "ClintonFdn", target: "billclinton", type: "licensing", icon: "http://pbs.twimg.com/profile_images/2456262742/u0oizrwxn6ovjtrim2p4_normal.jpeg"},
{source: "ComedyCentral", target: "ComedyCentral", type: "licensing", icon: "http://pbs.twimg.com/profile_images/428602434483544064/fIA6z4cq_normal.jpeg"},
{source: "ComedyCentral", target: "TheDailyShow", type: "licensing", icon: "http://pbs.twimg.com/profile_images/428602434483544064/fIA6z4cq_normal.jpeg"},
{source: "Cyber_War_News", target: "Cyber_War_News", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000431979562/af290aefe2c628f7d6cc1a5a3b2cd8db_normal.png"},
{source: "DefuseSec", target: "DefuseSec", type: "licensing", icon: "http://pbs.twimg.com/profile_images/2800044753/afd7e34ab6b0fd0fda54c2b847b37ef2_normal.png"},
{source: "DefuseSec", target: "matthew_d_green", type: "licensing", icon: "http://pbs.twimg.com/profile_images/2800044753/afd7e34ab6b0fd0fda54c2b847b37ef2_normal.png"},
{source: "DeptVetAffairs", target: "WhiteHouse", type: "licensing", icon: "http://pbs.twimg.com/profile_images/344513261565984455/a9fcce7feb947b2ec498491c6c6d6985_normal.png"},
{source: "DouglasLucas", target: "DouglasLucas", type: "licensing", icon: "http://pbs.twimg.com/profile_images/425901657373687810/akXVd8Sh_normal.png"},
{source: "DouglasLucas", target: "HistoryInPics", type: "licensing", icon: "http://pbs.twimg.com/profile_images/425901657373687810/akXVd8Sh_normal.png"},
{source: "DouglasLucas", target: "HistoryPixs", type: "licensing", icon: "http://pbs.twimg.com/profile_images/425901657373687810/akXVd8Sh_normal.png"},
{source: "DouglasLucas", target: "UN", type: "licensing", icon: "http://pbs.twimg.com/profile_images/425901657373687810/akXVd8Sh_normal.png"},
{source: "DouglasLucas", target: "WhiteHouse", type: "licensing", icon: "http://pbs.twimg.com/profile_images/425901657373687810/akXVd8Sh_normal.png"},
{source: "DouglasLucas", target: "wikileaks", type: "licensing", icon: "http://pbs.twimg.com/profile_images/425901657373687810/akXVd8Sh_normal.png"},
{source: "EarthPix", target: "HistoryInPics", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000408926177/3c54c23ddce812cef8c1a0e2141e4505_normal.jpeg"},
{source: "FamilyGuyonFOX", target: "AmericanDadFOX", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000121188826/b6d3e4ab5d9383e2596380a8d17633be_normal.jpeg"},
{source: "FamilyGuyonFOX", target: "FamilyGuyonFOX", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000121188826/b6d3e4ab5d9383e2596380a8d17633be_normal.jpeg"},
{source: "FraknToastr", target: "YouTube", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000000126157/75ad2e9acf913bc61beb26e4b8faa7e3_normal.png"},
{source: "GPUComputing", target: "nvidia", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3660133151/02c79668c62e6efd42be688b12e7c2c8_normal.png"},
{source: "Greedalitism365", target: "BarackObama", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "Greedalitism365", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "MHPshow", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "MHarrisPerry", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "PPact", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "SnoopDogg", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "ajam", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "billmaher", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "justgrateful", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "Greedalitism365", target: "maddow", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3088675096/095d40ef42d30f988c612fead9c1c2a7_normal.jpeg"},
{source: "HIGH_TIMES_Mag", target: "HIGH_TIMES_Mag", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000335599037/0eb06a07e3fbaa2aa0919f91d4df8258_normal.jpeg"},
{source: "Harvard", target: "Harvard", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3349317264/1954930211e08d2ba39bb6a670049eb3_normal.png"},
{source: "Harvard", target: "NASA", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3349317264/1954930211e08d2ba39bb6a670049eb3_normal.png"},
{source: "HistoryInPics", target: "EarthPix", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000113951273/4abbd87b253a99907fe7a18e1a2f7bb0_normal.jpeg"},
{source: "Intelinside", target: "arduino", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1706703916/Intel_Inside_normal.png"},
{source: "Intelinside", target: "intel", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1706703916/Intel_Inside_normal.png"},
{source: "Intelinside", target: "jack", type: "licensing", icon: "http://pbs.twimg.com/profile_images/1706703916/Intel_Inside_normal.png"},
{source: "IronUlrik", target: "bakjakob", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3393768028/4d5175d19ee6c199041faa77910dd8a7_normal.jpeg"},
{source: "KHQKelsey", target: "CNN", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3168131885/cb88e149e47f863013024a532abd7e83_normal.jpeg"},
{source: "KHQKelsey", target: "KHQKelsey", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3168131885/cb88e149e47f863013024a532abd7e83_normal.jpeg"},
{source: "KHQKelsey", target: "KHQLocalNews", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3168131885/cb88e149e47f863013024a532abd7e83_normal.jpeg"},
{source: "KHQKelsey", target: "patrickerickson", type: "licensing", icon: "http://pbs.twimg.com/profile_images/3168131885/cb88e149e47f863013024a532abd7e83_normal.jpeg"},
{source: "KHQLocalNews", target: "BarackObama", type: "licensing", icon: "http://pbs.twimg.com/profile_images/419191880975269888/8GWuSO-5_normal.jpeg"},
{source: "KHQLocalNews", target: "FLOTUS", type: "licensing", icon: "http://pbs.twimg.com/profile_images/419191880975269888/8GWuSO-5_normal.jpeg"},
{source: "KHQLocalNews", target: "KHQLocalNews", type: "licensing", icon: "http://pbs.twimg.com/profile_images/419191880975269888/8GWuSO-5_normal.jpeg"},
{source: "KHQLocalNews", target: "SpokesmanReview", type: "licensing", icon: "http://pbs.twimg.com/profile_images/419191880975269888/8GWuSO-5_normal.jpeg"},
{source: "KHQLocalNews", target: "patrickerickson", type: "licensing", icon: "http://pbs.twimg.com/profile_images/419191880975269888/8GWuSO-5_normal.jpeg"},
{source: "KerseyKyle", target: "AlexanderD_Beck", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "Bitcoin", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "BitcoinViews", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "Biz_Mawkie", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "DefuseSec", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "DouglasLucas", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "ForbesTech", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "Harvard", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "HistoryInPics", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "KerseyKyle", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "NatGeo", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "Percival", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "Pontifex", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "Python_Agent", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "SenSanders", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "StackBitcoin", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "YouTube", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "abandonedpix", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "amckinnell", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "bcrypt", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "blockchain", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "chifeng", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "codinghorror", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "coindesk", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "colemancda", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "coolearthpix", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "danielme_com", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "earthposts", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "ericries", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "joestump", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "justgrateful", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "jwisser", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "kevinkurian_", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "killertypo", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "linuxfoundation", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "opensourceway", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "py3k", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "qpython", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "randal_olson", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "rozelaudric", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "rundavidrun", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "whaleygeek", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"},
{source: "KerseyKyle", target: "xor", type: "licensing", icon: "http://pbs.twimg.com/profile_images/378800000578723407/75c187686698330e86a7e214d68c9a2e_normal.jpeg"}
];
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
link.icon = nodes[link.icon] || (nodes[link.icon] = {icon: link.icon});
});
var width = 1200, height = 1200;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) {
return "link " + d.type;
}).attr("marker-end", function(d) {
return "url(#" + d.type + ")"; });
var image = svg.append("g").selectAll("image")
.data(force.nodes())
.enter().append("image")
.attr("xlink:href", function(d) { return d.icon; })
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16)
.call(force.drag);
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
text.attr("transform", transform);
image.attr("transform", transform);
}
function linkArc(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
</script>
</body>
</html>
答案 0 :(得分：1)
您的图标网址附加到链接，而不是节点，因此以下代码没有意义：
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
link.icon = nodes[link.icon] || (nodes[link.icon] = {icon: link.icon});
});
对于每个链接，您要将三个节点添加到节点阵列。其中两个节点附加到链接（作为源和目标），但没有任何图标值。另一个节点与链接的图标属性相关联，但与用于绘制链接的源或目标无关。就力布局而言，这些节点没有连接到任何链路。未连接的节点都被分配了随机位置以启动，因此具有图标的节点随机定位，与链接的源和目标无关。
查看实时示例：http://fiddle.jshell.net/qpY9n/
我认为您的意图是图标与链接的源或目标相关联。如果想要将图标与链接的目标相关联，则此代码将实现此目的：
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
link.target.icon = link.icon;
});