d3 иконки уплывает из узлов

я пытаюсь создать сеть, используя библиотеку d3, но иконки уплывает от узлов,d3 иконки уплывает из узлов

Как я могу сохранить значки сосредоточенные на своих узлах?

Я прочитал эти две статьи для справки 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>

источник

2014-02-11 kyle k

Это было весело, чтобы найти свое имя пользователя в формате JSON! :) – rundavidrun

значок вашего URL-адресов привязаны к ссылкам, а не узлы, поэтому следующий код не имеет смысла:

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; 
});

Смотрите живой пример: http://fiddle.jshell.net/qpY9n/1/

источник

2014-02-11 06:22:17 AmeliaBR

Тогда вы! это было простое исправление, цель этой сети - визуализировать, как ретвитт распространяется вокруг твиттера. –

d3 иконки уплывает из узлов

ответ

Смежные вопросы