1. 首頁
  2. 問答
  3. D3浮動圖標從節點

D3浮動圖標從節點

2014-02-11 51 views
0

我試圖創建一個使用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

+0

這很有趣，找到我的JSON的用戶名！ :) – rundavidrun

回答

1

你的圖標的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

+0

然後你！這是一個簡單的修復，這個網站的目的是可視化轉推在Twitter上的傳播方式。 –

相關問題

 相關問題