D3力导向图：为什么不出现标志？
情况：
每个node都应该有相应的标志，事实并非如此。
码：
body { font-family: Lato; background-color: #F5F5F5; } .title { margin-top: 30px; margin-bottom: 30px; } #results { text-align: center; } #results div { margin-top: 15px; } #results { background-color: white; margin: auto; width: 1200px; padding: 40px; box-shadow: 2px 2px 2px black; } /*! * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */ .flag { display: inline-block; width: 16px; height: 11px; background-image: url("gMUNBQ/flags.png") no-repeat; } .flag.flag-td { background-position: -240px -132px; } .flag.flag-pw { background-position: 0 -121px; } .flag.flag-fk { background-position: -32px -44px; } .flag.flag-im { background-position: -48px -66px; } .flag.flag-fr { background-position: -80px -44px; } .flag.flag-sh { background-position: -240px -121px; } .flag.flag-bg { background-position: -64px -11px; } .flag.flag-ly { background-position: -48px -88px; } .flag.flag-tk { background-position: -64px -143px; } .flag.flag-re { background-position: -48px -121px; } .flag.flag-nl { background-position: -240px -99px; } .flag.flag-sv { background-position: -160px -132px; } .flag.flag-sa { background-position: -128px -121px; } .flag.flag-ck { background-position: -128px -22px; } .flag.flag-tr { background-position: -144px -143px; } .flag.flag-pr { background-position: -224px -110px; } .flag.flag-tv { background-position: -176px -143px; } .flag.flag-sd { background-position: -192px -121px; } .flag.flag-uy { background-position: -16px -154px; } .flag.flag-bb { background-position: 0 -11px; } .flag.flag-za { background-position: -256px -154px; } .flag.flag-vu { background-position: -144px -154px; } .flag.flag-ba { background-position: -256px 0; } .flag.flag-kr { background-position: -80px -77px; } .flag.flag-tf { background-position: -256px -132px; } .flag.flag-cl { background-position: -144px -22px; } .flag.flag-ki { background-position: -16px -77px; } .flag.flag-lr { background-position: -240px -77px; } .flag.flag-do { background-position: -96px -33px; } .flag.flag-dz { background-position: -112px -33px; } .flag.flag-cr { background-position: -208px -22px; } .flag.flag-ar { background-position: -144px 0; } .flag.flag-sb { background-position: -144px -121px; } .flag.flag-tj { background-position: -48px -143px; } .flag.flag-cw { background-position: -256px -22px; } .flag.flag-bv { background-position: -224px -11px; } .flag.flag-pn { background-position: -208px -110px; } .flag.flag-so { background-position: -80px -132px; } .flag.flag-la { background-position: -160px -77px; } .flag.flag-me { background-position: -112px -88px; } .flag.flag-sx { background-position: -176px -132px; } .flag.flag-sy { background-position: -192px -132px; } .flag.flag-gq { background-position: -32px -55px; } .flag.flag-ro { background-position: -64px -121px; } .flag.flag-kurdistan { background-position: -96px -77px; } .flag.flag-si { background-position: -256px -121px; } .flag.flag-mh { background-position: -144px -88px; } .flag.flag-ky { background-position: -128px -77px; } .flag.flag-eh { background-position: -176px -33px; } .flag.flag-ru { background-position: -96px -121px; } .flag.flag-tz { background-position: -208px -143px; } .flag.flag-np { background-position: 0 -110px; } .flag.flag-pg { background-position: -128px -110px; } .flag.flag-lb { background-position: -176px -77px; } .flag.flag-sn { background-position: -64px -132px; } .flag.flag-gw { background-position: -112px -55px; } .flag.flag-tt { background-position: -160px -143px; } .flag.flag-eg { background-position: -160px -33px; } .flag.flag-gn { background-position: 0 -55px; } .flag.flag-al { background-position: -80px 0; } .flag.flag-jm { background-position: -192px -66px; } .flag.flag-be { background-position: -32px -11px; } .flag.flag-kn { background-position: -48px -77px; } .flag.flag-mu { background-position: -48px -99px; } .flag.flag-az { background-position: -240px 0; } .flag.flag-gh { background-position: -208px -44px; } .flag.flag-vg { background-position: -96px -154px; } .flag.flag-ug { background-position: -240px -143px; } .flag.flag-rw { background-position: -112px -121px; } .flag.flag-pl { background-position: -176px -110px; } .flag.flag-at { background-position: -176px 0; } .flag.flag-bs { background-position: -192px -11px; } .flag.flag-ee { background-position: -144px -33px; } .flag.flag-no { background-position: -256px -99px; } .flag.flag-ca { background-position: -16px -22px; } .flag.flag-ml { background-position: -176px -88px; } .flag.flag-vc { background-position: -64px -154px; } .flag.flag-mc { background-position: -80px -88px; } .flag.flag-vi { background-position: -112px -154px; } .flag.flag-fj { background-position: -16px -44px; } .flag.flag-sj { background-position: 0 -132px; } .flag.flag-ic { background-position: -240px -55px; } .flag.flag-fo { background-position: -64px -44px; } .flag.flag-lu { background-position: -16px -88px; } .flag.flag-nf { background-position: -192px -99px; } .flag.flag-mm { background-position: -192px -88px; } .flag.flag-er { background-position: -208px -33px; } .flag.flag-somaliland { background-position: -96px -132px; } .flag.flag-lc { background-position: -192px -77px; } .flag.flag-cd { background-position: -48px -22px; } .flag.flag-ma { background-position: -64px -88px; } .flag.flag-mp { background-position: -240px -88px; } .flag.flag-mx { background-position: -96px -99px; } .flag.flag-na { background-position: -144px -99px; } .flag.flag-gs { background-position: -64px -55px; } .flag.flag-tw { background-position: -192px -143px; } .flag.flag-ae { background-position: -16px 0; } .flag.flag-cu { background-position: -224px -22px; } .flag.flag-id { background-position: -256px -55px; } .flag.flag-ht { background-position: -208px -55px; } .flag.flag-kw { background-position: -112px -77px; } .flag.flag-by { background-position: -256px -11px; } .flag.flag-il { background-position: -16px -66px; } .flag.flag-ps { background-position: -240px -110px; } .flag.flag-tl { background-position: -80px -143px; } .flag.flag-ai { background-position: -64px 0; } .flag.flag-gp { background-position: -16px -55px; } .flag.flag-pt { background-position: -256px -110px; } .flag.flag-gr { background-position: -48px -55px; } .flag.flag-bw { background-position: -240px -11px; } .flag.flag-kp { background-position: -64px -77px; } .flag.flag-mq { background-position: -256px -88px; } .flag.flag-ad { background-position: 0 0; } .flag.flag-gu { background-position: -96px -55px; } .flag.flag-cf { background-position: -64px -22px; } .flag.flag-ni { background-position: -224px -99px; } .flag.flag-ke { background-position: -240px -66px; } .flag.flag-mz { background-position: -128px -99px; } .flag.flag-kh { background-position: 0 -77px; } .flag.flag-us { background-position: 0 -154px; } .flag.flag-wf { background-position: -176px -154px; } .flag.flag-hk { background-position: -144px -55px; } .flag.flag-ph { background-position: -144px -110px; } .flag.flag-de { background-position: -32px -33px; } .flag.flag-sc { background-position: -160px -121px; } .flag.flag-tibet { background-position: -32px -143px; } .flag.flag-cy { background-position: 0 -33px; } .flag.flag-scotland { background-position: -176px -121px; } .flag.flag-ws { background-position: -192px -154px; } .flag.flag-ci { background-position: -112px -22px; } .flag.flag-bf { background-position: -48px -11px; } .flag.flag-tn { background-position: -112px -143px; } .flag.flag-my { background-position: -112px -99px; } .flag.flag-mw { background-position: -80px -99px; } .flag.flag-an { background-position: -112px 0; } .flag.flag-nr { background-position: -16px -110px; } .flag.flag-pm { background-position: -192px -110px; } .flag.flag-xk { background-position: -208px -154px; } .flag.flag-es { background-position: -224px -33px; } .flag.flag-pa { background-position: -80px -110px; } .flag.flag-jp { background-position: -224px -66px; } .flag.flag-mr { background-position: 0 -99px; } .flag.flag-pf { background-position: -112px -110px; } .flag.flag-cn { background-position: -176px -22px; } .flag.flag-au { background-position: -192px 0; } .flag.flag-cv { background-position: -240px -22px; } .flag.flag-ao { background-position: -128px 0; } .flag.flag-fi { background-position: 0 -44px; } .flag.flag-nc { background-position: -160px -99px; } .flag.flag-ag { background-position: -48px 0; } .flag.flag-gy { background-position: -128px -55px; } .flag.flag-nu { background-position: -32px -110px; } .flag.flag-to { background-position: -128px -143px; } .flag.flag-qa { background-position: -32px -121px; } .flag.flag-dm { background-position: -80px -33px; } .flag.flag-aw { background-position: -208px 0; } .flag.flag-cz { background-position: -16px -33px; } .flag.flag-mk { background-position: -160px -88px; } .flag.flag-ax { background-position: -224px 0; } .flag.flag-pk { background-position: -160px -110px; } .flag.flag-st { background-position: -144px -132px; } .flag.flag-bz { background-position: 0 -22px; } .flag.flag-br { background-position: -176px -11px; } .flag.flag-am { background-position: -96px 0; } .flag.flag-bh { background-position: -80px -11px; } .flag.flag-gg { background-position: -192px -44px; } .flag.flag-um { background-position: -256px -143px; } .flag.flag-ga { background-position: -96px -44px; } .flag.flag-yt { background-position: -240px -154px; } .flag.flag-gd { background-position: -128px -44px; } .flag.flag-dj { background-position: -48px -33px; } .flag.flag-ss { background-position: -128px -132px; } .flag.flag-gt { background-position: -80px -55px; } .flag.flag-sk { background-position: -16px -132px; } .flag.flag-sm { background-position: -48px -132px; } .flag.flag-bd { background-position: -16px -11px; } .flag.flag-jo { background-position: -208px -66px; } .flag.flag-iq { background-position: -96px -66px; } .flag.flag-bt { background-position: -208px -11px; } .flag.flag-it { background-position: -144px -66px; } .flag.flag-mg { background-position: -128px -88px; } .flag.flag-sr { background-position: -112px -132px; } .flag.flag-sg { background-position: -224px -121px; } .flag.flag-ec { background-position: -128px -33px; } .flag.flag-ge { background-position: -144px -44px; } .flag.flag-ie { background-position: 0 -66px; } .flag.flag-kz { background-position: -144px -77px; } .flag.flag-tc { background-position: -224px -132px; } .flag.flag-tg { background-position: 0 -143px; } .flag.flag-lv { background-position: -32px -88px; } .flag.flag-mo { background-position: -224px -88px; } .flag.flag-mv { background-position: -64px -99px; } .flag.flag-sz { background-position: -208px -132px; } .flag.flag-va { background-position: -48px -154px; } .flag.flag-bn { background-position: -144px -11px; } .flag.flag-bj { background-position: -112px -11px; } .flag.flag-zm { background-position: -16px -165px; } .flag.flag-co { background-position: -192px -22px; } .flag.flag-mn { background-position: -208px -88px; } .flag.flag-zw { background-position: -32px -165px; } .flag.flag-vn { background-position: -128px -154px; } .flag.flag-sl { background-position: -32px -132px; } .flag.flag-gi { background-position: -224px -44px; } .flag.flag-as { background-position: -160px 0; } .flag.flag-catalonia { background-position: -32px -22px; } .flag.flag-gb { background-position: -112px -44px; } .flag.flag-gl { background-position: -240px -44px; } .flag.flag-england { background-position: -192px -33px; } .flag.flag-py { background-position: -16px -121px; } .flag.flag-th { background-position: -16px -143px; } .flag.flag-eu { background-position: -256px -33px; } .flag.flag-zanzibar { background-position: 0 -165px; } .flag.flag-ch { background-position: -96px -22px; } .flag.flag-km { background-position: -32px -77px; } .flag.flag-om { background-position: -64px -110px; } .flag.flag-et { background-position: -240px -33px; } .flag.flag-fm { background-position: -48px -44px; } .flag.flag-ve { background-position: -80px -154px; } .flag.flag-io { background-position: -80px -66px; } .flag.flag-bm { background-position: -128px -11px; } .flag.flag-lk { background-position: -224px -77px; } .flag.flag-ye { background-position: -224px -154px; } .flag.flag-ms { background-position: -16px -99px; } .flag.flag-is { background-position: -128px -66px; } .flag.flag-hu { background-position: -224px -55px; } .flag.flag-rs { background-position: -80px -121px; } .flag.flag-md { background-position: -96px -88px; } .flag.flag-hn { background-position: -176px -55px; } .flag.flag-ne { background-position: -176px -99px; } .flag.flag-mt { background-position: -32px -99px; } .flag.flag-ng { background-position: -208px -99px; } .flag.flag-kg { background-position: -256px -66px; } .flag.flag-je { background-position: -176px -66px; } .flag.flag-in { background-position: -64px -66px; } .flag.flag-hr { background-position: -192px -55px; } .flag.flag-hm { background-position: -160px -55px; } .flag.flag-cm { background-position: -160px -22px; } .flag.flag-uz { background-position: -32px -154px; } .flag.flag-wales { background-position: -160px -154px; } .flag.flag-gm { background-position: -256px -44px; } .flag.flag-li { background-position: -208px -77px; } .flag.flag-nz { background-position: -48px -110px; } .flag.flag-bo { background-position: -160px -11px; } .flag.flag-se { background-position: -208px -121px; } .flag.flag-tm { background-position: -96px -143px; } .flag.flag-cg { background-position: -80px -22px; } .flag.flag-ir { background-position: -112px -66px; } .flag.flag-dk { background-position: -64px -33px; } .flag.flag-gf { background-position: -160px -44px; } .flag.flag-bi { background-position: -96px -11px; } .flag.flag-pe { background-position: -96px -110px; } .flag.flag-ua { background-position: -224px -143px; } .flag.flag-af { background-position: -32px 0; } .flag.flag-ls { background-position: -256px -77px; } .flag.flag-lt { background-position: 0 -88px; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link rel="stylesheet" href="main.css"> <style> body { font-family: Lato; background-color: #F5F5F5; } </style> </head> <body> <div class="body"> <div class="container-fluid"> <h1 class="text-center title">Countries linked by Border</h1> <div class="text-center"> <div id="results"></div> <div id="flags"></div> </div> </div> </div> </body> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script type="text/javascript"> // Acknowledgements: // Excelent D3 V4 tutorial: http://www.puzzlr.org/force-graphs-with-d3/ // Drag Example: https://github.com/jenovs/chingu-fcc-speedrun-challenge/blob/master/data-vis/force-directed-graph/src/components/ForceGraph/ForceGraph.js d3.json("https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json", function(error, json) { if (error) { return console.warn(error); } const data = json; const nodes = data.nodes; const links = data.links; const margin = { top: 0, right: 0, bottom: 0, left: 0 } const w = 1250 - margin.left - margin.right; const h = 550 - margin.top - margin.bottom; const results = d3.select('#results') const svg = results.append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom); const simulation = d3.forceSimulation() .nodes(nodes) .force("charge_force", d3.forceManyBody().strength(-3)) .force("center_force", d3.forceCenter(w / 2, h / 2)); const div = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const link = svg.append("g") .attr("class", "links") .selectAll("line") .data(links) .enter().append("line") .attr('stroke', 'black') .attr("stroke-width", 2); const node = results.select('#flags').selectAll('.node') .data(data.nodes) .enter() .append('img') .attr('class', d => 'flag flag-' + d.code) .on("mouseover", function(d) { div.transition() .duration(200) .style("opacity", .9); div .html(d.country) .style("left", (d3.event.pageX - 7) + "px") .style("top", (d3.event.pageY - 30) + "px"); }) .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }).call(d3.drag() .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded)); const link_force = d3.forceLink(links) simulation.force("links", link_force) simulation.on("tick", tickActions); function tickActions() { node .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")" }); link .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; }); } function dragStarted(d) { if (!d3.event.active) sim.alphaTarget(0.3).restart(); d.fx = dx; d.fy = dy; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragEnded(d) { if (!d3.event.active) sim.alphaTarget(0); d.fx = null; d.fy = null; } }); </script> </html>
代码做了一些改变，似乎现在正在工作。
- 包含标志和标志类的div的位置属性被设置为绝对。
-
<img>标签被追加了两次。 删除了额外的代码。 - 错误错误 – 在dragstart和dragend方法中将
sim更改为simulation。 -
flagsdiv不在svg里面。 因此，从result.select("#flags")改为d3.select("#flags")等等
d3.json("https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json", function(error, json) { if (error) { return console.warn(error); } const data = json; const nodes = data.nodes; const links = data.links; const margin = { top: 0, right: 0, bottom: 0, left: 0 } const w = 1200 - margin.left - margin.right; const h = 550 - margin.top - margin.bottom; const results = d3.select('#results') const svg = results.append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom); const simulation = d3.forceSimulation() .nodes(nodes) .force("charge_force", d3.forceManyBody().strength(-3)) .force("center_force", d3.forceCenter(w / 2, h / 2)); const div = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const link = svg.append("g") .attr("class", "links") .selectAll("line") .data(links) .enter().append("line") .attr('stroke', 'black') .attr("stroke-width", 2); const node = d3.select('#flags').selectAll('.node') .data(nodes) .enter() .append('img') .attr('class', d => 'flag flag-' + d.code) .on("mouseover", function(d) { div.transition() .duration(200) .style("opacity", .9); div.html(d.country) .style("left", (d3.event.pageX - 7) + "px") .style("top", (d3.event.pageY - 30) + "px"); }) .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }).call(d3.drag() .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded)) const link_force = d3.forceLink(links) simulation.force("links", link_force) simulation.on("tick", tickActions); function tickActions() { node.style('left', d => (dx + 6) + "px") .style('top', d => (dy - 5) + "px"); link .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; }); } function dragStarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = dx; d.fy = dy; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragEnded(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } });
body { font-family: Lato; background-color: #F5F5F5; } .title { margin-top: 10px; margin-bottom: 10px; } #results { text-align: center; } #flags { margin-top: -50px; } #results { background-color: white; width: 1200px; height: 550px; box-shadow: 2px 2px 2px black; } div.tooltip { color: white; position: absolute; text-align: center; padding: 5px; font: 12px sans-serif; background: black; border: 0px; border-radius: 8px; pointer-events: none; } /*! * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */ .flag { width: 16px; height: 11px; background: url(https://www.cs.mun.ca/~h65ped/Public/country%20data%20for%20force%20directed%20graph/flags.png) no-repeat; position: absolute; } .flags { position: absolute; } .flag.flag-ad { background-position: -16px 0 } .flag.flag-ae { background-position: -32px 0 } .flag.flag-af { background-position: -48px 0 } .flag.flag-ag { background-position: -64px 0 } .flag.flag-ai { background-position: -80px 0 } .flag.flag-al { background-position: -96px 0 } .flag.flag-am { background-position: -112px 0 } .flag.flag-an { background-position: -128px 0 } .flag.flag-ao { background-position: -144px 0 } .flag.flag-ar { background-position: -160px 0 } .flag.flag-as { background-position: -176px 0 } .flag.flag-at { background-position: -192px 0 } .flag.flag-au { background-position: -208px 0 } .flag.flag-aw { background-position: -224px 0 } .flag.flag-az { background-position: -240px 0 } .flag.flag-ba { background-position: 0 -11px } .flag.flag-bb { background-position: -16px -11px } .flag.flag-bd { background-position: -32px -11px } .flag.flag-be { background-position: -48px -11px } .flag.flag-bf { background-position: -64px -11px } .flag.flag-bg { background-position: -80px -11px } .flag.flag-bh { background-position: -96px -11px } .flag.flag-bi { background-position: -112px -11px } .flag.flag-bj { background-position: -128px -11px } .flag.flag-bm { background-position: -144px -11px } .flag.flag-bn { background-position: -160px -11px } .flag.flag-bo { background-position: -176px -11px } .flag.flag-br { background-position: -192px -11px } .flag.flag-bs { background-position: -208px -11px } .flag.flag-bt { background-position: -224px -11px } .flag.flag-bv { background-position: -240px -11px } .flag.flag-bw { background-position: 0 -22px } .flag.flag-by { background-position: -16px -22px } .flag.flag-bz { background-position: -32px -22px } .flag.flag-ca { background-position: -48px -22px } .flag.flag-catalonia { background-position: -64px -22px } .flag.flag-cd { background-position: -80px -22px } .flag.flag-cf { background-position: -96px -22px } .flag.flag-cg { background-position: -112px -22px } .flag.flag-ch { background-position: -128px -22px } .flag.flag-ci { background-position: -144px -22px } .flag.flag-ck { background-position: -160px -22px } .flag.flag-cl { background-position: -176px -22px } .flag.flag-cm { background-position: -192px -22px } .flag.flag-cn { background-position: -208px -22px } .flag.flag-co { background-position: -224px -22px } .flag.flag-cr { background-position: -240px -22px } .flag.flag-cu { background-position: 0 -33px } .flag.flag-cv { background-position: -16px -33px } .flag.flag-cw { background-position: -32px -33px } .flag.flag-cy { background-position: -48px -33px } .flag.flag-cz { background-position: -64px -33px } .flag.flag-de { background-position: -80px -33px } .flag.flag-dj { background-position: -96px -33px } .flag.flag-dk { background-position: -112px -33px } .flag.flag-dm { background-position: -128px -33px } .flag.flag-do { background-position: -144px -33px } .flag.flag-dz { background-position: -160px -33px } .flag.flag-ec { background-position: -176px -33px } .flag.flag-ee { background-position: -192px -33px } .flag.flag-eg { background-position: -208px -33px } .flag.flag-eh { background-position: -224px -33px } .flag.flag-england { background-position: -240px -33px } .flag.flag-er { background-position: 0 -44px } .flag.flag-es { background-position: -16px -44px } .flag.flag-et { background-position: -32px -44px } .flag.flag-eu { background-position: -48px -44px } .flag.flag-fi { background-position: -64px -44px } .flag.flag-fj { background-position: -80px -44px } .flag.flag-fk { background-position: -96px -44px } .flag.flag-fm { background-position: -112px -44px } .flag.flag-fo { background-position: -128px -44px } .flag.flag-fr { background-position: -144px -44px } .flag.flag-ga { background-position: -160px -44px } .flag.flag-gb { background-position: -176px -44px } .flag.flag-gd { background-position: -192px -44px } .flag.flag-ge { background-position: -208px -44px } .flag.flag-gf { background-position: -224px -44px } .flag.flag-gg { background-position: -240px -44px } .flag.flag-gh { background-position: 0 -55px } .flag.flag-gi { background-position: -16px -55px } .flag.flag-gl { background-position: -32px -55px } .flag.flag-gm { background-position: -48px -55px } .flag.flag-gn { background-position: -64px -55px } .flag.flag-gp { background-position: -80px -55px } .flag.flag-gq { background-position: -96px -55px } .flag.flag-gr { background-position: -112px -55px } .flag.flag-gs { background-position: -128px -55px } .flag.flag-gt { background-position: -144px -55px } .flag.flag-gu { background-position: -160px -55px } .flag.flag-gw { background-position: -176px -55px } .flag.flag-gy { background-position: -192px -55px } .flag.flag-hk { background-position: -208px -55px } .flag.flag-hm { background-position: -224px -55px } .flag.flag-hn { background-position: -240px -55px } .flag.flag-hr { background-position: 0 -66px } .flag.flag-ht { background-position: -16px -66px } .flag.flag-hu { background-position: -32px -66px } .flag.flag-ic { background-position: -48px -66px } .flag.flag-id { background-position: -64px -66px } .flag.flag-ie { background-position: -80px -66px } .flag.flag-il { background-position: -96px -66px } .flag.flag-im { background-position: -112px -66px } .flag.flag-in { background-position: -128px -66px } .flag.flag-io { background-position: -144px -66px } .flag.flag-iq { background-position: -160px -66px } .flag.flag-ir { background-position: -176px -66px } .flag.flag-is { background-position: -192px -66px } .flag.flag-it { background-position: -208px -66px } .flag.flag-je { background-position: -224px -66px } .flag.flag-jm { background-position: -240px -66px } .flag.flag-jo { background-position: 0 -77px } .flag.flag-jp { background-position: -16px -77px } .flag.flag-ke { background-position: -32px -77px } .flag.flag-kg { background-position: -48px -77px } .flag.flag-kh { background-position: -64px -77px } .flag.flag-ki { background-position: -80px -77px } .flag.flag-km { background-position: -96px -77px } .flag.flag-kn { background-position: -112px -77px } .flag.flag-kp { background-position: -128px -77px } .flag.flag-kr { background-position: -144px -77px } .flag.flag-kurdistan { background-position: -160px -77px } .flag.flag-kw { background-position: -176px -77px } .flag.flag-ky { background-position: -192px -77px } .flag.flag-kz { background-position: -208px -77px } .flag.flag-la { background-position: -224px -77px } .flag.flag-lb { background-position: -240px -77px } .flag.flag-lc { background-position: 0 -88px } .flag.flag-li { background-position: -16px -88px } .flag.flag-lk { background-position: -32px -88px } .flag.flag-lr { background-position: -48px -88px } .flag.flag-ls { background-position: -64px -88px } .flag.flag-lt { background-position: -80px -88px } .flag.flag-lu { background-position: -96px -88px } .flag.flag-lv { background-position: -112px -88px } .flag.flag-ly { background-position: -128px -88px } .flag.flag-ma { background-position: -144px -88px } .flag.flag-mc { background-position: -160px -88px } .flag.flag-md { background-position: -176px -88px } .flag.flag-me { background-position: -192px -88px } .flag.flag-mg { background-position: -208px -88px } .flag.flag-mh { background-position: -224px -88px } .flag.flag-mk { background-position: -240px -88px } .flag.flag-ml { background-position: 0 -99px } .flag.flag-mm { background-position: -16px -99px } .flag.flag-mn { background-position: -32px -99px } .flag.flag-mo { background-position: -48px -99px } .flag.flag-mp { background-position: -64px -99px } .flag.flag-mq { background-position: -80px -99px } .flag.flag-mr { background-position: -96px -99px } .flag.flag-ms { background-position: -112px -99px } .flag.flag-mt { background-position: -128px -99px } .flag.flag-mu { background-position: -144px -99px } .flag.flag-mv { background-position: -160px -99px } .flag.flag-mw { background-position: -176px -99px } .flag.flag-mx { background-position: -192px -99px } .flag.flag-my { background-position: -208px -99px } .flag.flag-mz { background-position: -224px -99px } .flag.flag-na { background-position: -240px -99px } .flag.flag-nc { background-position: 0 -110px } .flag.flag-ne { background-position: -16px -110px } .flag.flag-nf { background-position: -32px -110px } .flag.flag-ng { background-position: -48px -110px } .flag.flag-ni { background-position: -64px -110px } .flag.flag-nl { background-position: -80px -110px } .flag.flag-no { background-position: -96px -110px } .flag.flag-np { background-position: -112px -110px } .flag.flag-nr { background-position: -128px -110px } .flag.flag-nu { background-position: -144px -110px } .flag.flag-nz { background-position: -160px -110px } .flag.flag-om { background-position: -176px -110px } .flag.flag-pa { background-position: -192px -110px } .flag.flag-pe { background-position: -208px -110px } .flag.flag-pf { background-position: -224px -110px } .flag.flag-pg { background-position: -240px -110px } .flag.flag-ph { background-position: 0 -121px } .flag.flag-pk { background-position: -16px -121px } .flag.flag-pl { background-position: -32px -121px } .flag.flag-pm { background-position: -48px -121px } .flag.flag-pn { background-position: -64px -121px } .flag.flag-pr { background-position: -80px -121px } .flag.flag-ps { background-position: -96px -121px } .flag.flag-pt { background-position: -112px -121px } .flag.flag-pw { background-position: -128px -121px } .flag.flag-py { background-position: -144px -121px } .flag.flag-qa { background-position: -160px -121px } .flag.flag-re { background-position: -176px -121px } .flag.flag-ro { background-position: -192px -121px } .flag.flag-rs { background-position: -208px -121px } .flag.flag-ru { background-position: -224px -121px } .flag.flag-rw { background-position: -240px -121px } .flag.flag-sa { background-position: 0 -132px } .flag.flag-sb { background-position: -16px -132px } .flag.flag-sc { background-position: -32px -132px } .flag.flag-scotland { background-position: -48px -132px } .flag.flag-sd { background-position: -64px -132px } .flag.flag-se { background-position: -80px -132px } .flag.flag-sg { background-position: -96px -132px } .flag.flag-sh { background-position: -112px -132px } .flag.flag-si { background-position: -128px -132px } .flag.flag-sk { background-position: -144px -132px } .flag.flag-sl { background-position: -160px -132px } .flag.flag-sm { background-position: -176px -132px } .flag.flag-sn { background-position: -192px -132px } .flag.flag-so { background-position: -208px -132px } .flag.flag-somaliland { background-position: -224px -132px } .flag.flag-sr { background-position: -240px -132px } .flag.flag-ss { background-position: 0 -143px } .flag.flag-st { background-position: -16px -143px } .flag.flag-sv { background-position: -32px -143px } .flag.flag-sx { background-position: -48px -143px } .flag.flag-sy { background-position: -64px -143px } .flag.flag-sz { background-position: -80px -143px } .flag.flag-tc { background-position: -96px -143px } .flag.flag-td { background-position: -112px -143px } .flag.flag-tf { background-position: -128px -143px } .flag.flag-tg { background-position: -144px -143px } .flag.flag-th { background-position: -160px -143px } .flag.flag-tibet { background-position: -176px -143px } .flag.flag-tj { background-position: -192px -143px } .flag.flag-tk { background-position: -208px -143px } .flag.flag-tl { background-position: -224px -143px } .flag.flag-tm { background-position: -240px -143px } .flag.flag-tn { background-position: 0 -154px } .flag.flag-to { background-position: -16px -154px } .flag.flag-tr { background-position: -32px -154px } .flag.flag-tt { background-position: -48px -154px } .flag.flag-tv { background-position: -64px -154px } .flag.flag-tw { background-position: -80px -154px } .flag.flag-tz { background-position: -96px -154px } .flag.flag-ua { background-position: -112px -154px } .flag.flag-ug { background-position: -128px -154px } .flag.flag-um { background-position: -144px -154px } .flag.flag-us { background-position: -160px -154px } .flag.flag-uy { background-position: -176px -154px } .flag.flag-uz { background-position: -192px -154px } .flag.flag-va { background-position: -208px -154px } .flag.flag-vc { background-position: -224px -154px } .flag.flag-ve { background-position: -240px -154px } .flag.flag-vg { background-position: 0 -165px } .flag.flag-vi { background-position: -16px -165px } .flag.flag-vn { background-position: -32px -165px } .flag.flag-vu { background-position: -48px -165px } .flag.flag-wales { background-position: -64px -165px } .flag.flag-wf { background-position: -80px -165px } .flag.flag-ws { background-position: -96px -165px } .flag.flag-xk { background-position: -112px -165px } .flag.flag-ye { background-position: -128px -165px } .flag.flag-yt { background-position: -144px -165px } .flag.flag-za { background-position: -160px -165px } .flag.flag-zanzibar { background-position: -176px -165px } .flag.flag-zm { background-position: -192px -165px } .flag.flag-zw { background-position: -208px -165px }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link rel="stylesheet" href="main.css"> <style> body { font-family: Lato; background-color: #F5F5F5; } </style> </head> <body> <div class="body"> <div class="container-fluid"> <h1 class="text-center title">Countries linked by Border</h1> <div class="text-center"> <div id="flags"></div> <div id="results"></div> </div> </div> </div> </body> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </html>
In your code above you are attempting to parent an HTML img tag to an SVG parent. This will never work . In the question I linked to in the comments, that OP attempted to solve this problem by using the foreignObject tag (which then allows HTML content inside it). As you mentioned, this is evil and should be avoided. So, my solution in the linked question was to set up some svg patterns that allow you to take your single sprite image and transform it to the proper coordinates for each flag. Here is that approach with your code base…
Full code here (that stack snippet was too big so I had to remove some flags).
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <style> body { font-family: Lato; background-color: #F5F5F5; } </style> </head> <body> <div class="body"> <div class="container-fluid"> <h1 class="text-center title">Countries linked by Border</h1> <div class="text-center"> <div id="results"></div> </div> </div> </div> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script type="text/javascript"> d3.json("https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json", function(error, json) { if (error) { return console.warn(error); } const data = json; const nodes = data.nodes; const links = data.links; var imagePos = [{ "c": "td", "x": -240, "y": -132 }, { "c": "pw", "x": 0, "y": -121 }, { "c": "fk", "x": -32, "y": -44 }, { "c": "im", "x": -48, "y": -66 }, { "c": "fr", "x": -80, "y": -44 }, { "c": "sh", "x": -240, "y": -121 }, { "c": "bg", "x": -64, "y": -11 }, { "c": "ly", "x": -48, "y": -88 }, { "c": "tk", "x": -64, "y": -143 }, { "c": "re", "x": -48, "y": -121 }, { "c": "nl", "x": -240, "y": -99 }, { "c": "sv", "x": -160, "y": -132 }, { "c": "sa", "x": -128, "y": -121 }, { "c": "ck", "x": -128, "y": -22 }, { "c": "tr", "x": -144, "y": -143 }, { "c": "pr", "x": -224, "y": -110 }, { "c": "tv", "x": -176, "y": -143 }, { "c": "sd", "x": -192, "y": -121 }, { "c": "uy", "x": -16, "y": -154 }, { "c": "bb", "x": 0, "y": -11 }, { "c": "za", "x": -256, "y": -154 }, { "c": "vu", "x": -144, "y": -154 }, { "c": "ba", "x": -256, "y": 0 }, { "c": "kr", "x": -80, "y": -77 }, { "c": "tf", "x": -256, "y": -132 }, { "c": "cl", "x": -144, "y": -22 }, { "c": "ki", "x": -16, "y": -77 }, { "c": "lr", "x": -240, "y": -77 }, { "c": "do", "x": -96, "y": -33 }, { "c": "dz", "x": -112, "y": -33 }, { "c": "cr", "x": -208, "y": -22 }, { "c": "ar", "x": -144, "y": 0 }, { "c": "sb", "x": -144, "y": -121 }, { "c": "tj", "x": -48, "y": -143 }, { "c": "cw", "x": -256, "y": -22 }, { "c": "bv", "x": -224, "y": -11 }, { "c": "pn", "x": -208, "y": -110 }, { "c": "so", "x": -80, "y": -132 }, { "c": "la", "x": -160, "y": -77 }, { "c": "me", "x": -112, "y": -88 }, { "c": "sx", "x": -176, "y": -132 }, { "c": "sy", "x": -192, "y": -132 }, { "c": "gq", "x": -32, "y": -55 }, { "c": "ro", "x": -64, "y": -121 }, { "c": "ku", "x": -96, "y": -77 }, { "c": "si", "x": -256, "y": -121 }, { "c": "mh", "x": -144, "y": -88 }, { "c": "ky", "x": -128, "y": -77 }, { "c": "eh", "x": -176, "y": -33 }, { "c": "ru", "x": -96, "y": -121 }, { "c": "tz", "x": -208, "y": -143 }, { "c": "np", "x": 0, "y": -110 }, { "c": "pg", "x": -128, "y": -110 }, { "c": "lb", "x": -176, "y": -77 }, { "c": "sn", "x": -64, "y": -132 }, { "c": "gw", "x": -112, "y": -55 }, { "c": "tt", "x": -160, "y": -143 }, { "c": "eg", "x": -160, "y": -33 }, { "c": "gn", "x": 0, "y": -55 }, { "c": "al", "x": -80, "y": 0 }, { "c": "jm", "x": -192, "y": -66 }, { "c": "be", "x": -32, "y": -11 }, { "c": "kn", "x": -48, "y": -77 }, { "c": "mu", "x": -48, "y": -99 }, { "c": "az", "x": -240, "y": 0 }, { "c": "gh", "x": -208, "y": -44 }, { "c": "vg", "x": -96, "y": -154 }, { "c": "ug", "x": -240, "y": -143 }, { "c": "rw", "x": -112, "y": -121 }, { "c": "pl", "x": -176, "y": -110 }, { "c": "at", "x": -176, "y": 0 }, { "c": "bs", "x": -192, "y": -11 }, { "c": "ee", "x": -144, "y": -33 }, { "c": "no", "x": -256, "y": -99 }, { "c": "ca", "x": -16, "y": -22 }, { "c": "ml", "x": -176, "y": -88 }, { "c": "vc", "x": -64, "y": -154 }, { "c": "mc", "x": -80, "y": -88 }, { "c": "vi", "x": -112, "y": -154 }, { "c": "fj", "x": -16, "y": -44 }, { "c": "sj", "x": 0, "y": -132 }, { "c": "ic", "x": -240, "y": -55 }, { "c": "fo", "x": -64, "y": -44 }, { "c": "lu", "x": -16, "y": -88 }, { "c": "nf", "x": -192, "y": -99 }, { "c": "mm", "x": -192, "y": -88 }, { "c": "er", "x": -208, "y": -33 }, { "c": "so", "x": -96, "y": -132 }, { "c": "lc", "x": -192, "y": -77 }, { "c": "cd", "x": -48, "y": -22 }, { "c": "ma", "x": -64, "y": -88 }, { "c": "mp", "x": -240, "y": -88 }, { "c": "mx", "x": -96, "y": -99 }, { "c": "na", "x": -144, "y": -99 }, { "c": "gs", "x": -64, "y": -55 }, { "c": "tw", "x": -192, "y": -143 }, { "c": "ae", "x": -16, "y": 0 }, { "c": "cu", "x": -224, "y": -22 }, { "c": "id", "x": -256, "y": -55 }, { "c": "ht", "x": -208, "y": -55 }, { "c": "kw", "x": -112, "y": -77 }, { "c": "by", "x": -256, "y": -11 }, { "c": "il", "x": -16, "y": -66 }, { "c": "ps", "x": -240, "y": -110 }, { "c": "tl", "x": -80, "y": -143 }, { "c": "ai", "x": -64, "y": 0 }, { "c": "gp", "x": -16, "y": -55 }, { "c": "pt", "x": -256, "y": -110 }, { "c": "gr", "x": -48, "y": -55 }, { "c": "bw", "x": -240, "y": -11 }, { "c": "kp", "x": -64, "y": -77 }, { "c": "mq", "x": -256, "y": -88 }, { "c": "ad", "x": 0, "y": 0 }, { "c": "gu", "x": -96, "y": -55 }, { "c": "cf", "x": -64, "y": -22 }, { "c": "ni", "x": -224, "y": -99 }, { "c": "ke", "x": -240, "y": -66 }, { "c": "mz", "x": -128, "y": -99 }, { "c": "kh", "x": 0, "y": -77 }, { "c": "us", "x": 0, "y": -154 }, { "c": "wf", "x": -176, "y": -154 }, { "c": "hk", "x": -144, "y": -55 }, { "c": "ph", "x": -144, "y": -110 }, { "c": "de", "x": -32, "y": -33 }, { "c": "sc", "x": -160, "y": -121 }, { "c": "ti", "x": -32, "y": -143 }, { "c": "cy", "x": 0, "y": -33 }, { "c": "sc", "x": -176, "y": -121 }, { "c": "ws", "x": -192, "y": -154 }, { "c": "ci", "x": -112, "y": -22 }, { "c": "bf", "x": -48, "y": -11 }, { "c": "tn", "x": -112, "y": -143 }, { "c": "my", "x": -112, "y": -99 }, { "c": "mw", "x": -80, "y": -99 }, { "c": "an", "x": -112, "y": 0 }, { "c": "nr", "x": -16, "y": -110 }, { "c": "pm", "x": -192, "y": -110 }, { "c": "xk", "x": -208, "y": -154 }, { "c": "es", "x": -224, "y": -33 }, { "c": "pa", "x": -80, "y": -110 }, { "c": "jp", "x": -224, "y": -66 }, { "c": "mr", "x": 0, "y": -99 }, { "c": "pf", "x": -112, "y": -110 }, { "c": "cn", "x": -176, "y": -22 }, { "c": "au", "x": -192, "y": 0 }, { "c": "cv", "x": -240, "y": -22 }, { "c": "ao", "x": -128, "y": 0 }, { "c": "fi", "x": 0, "y": -44 }, { "c": "nc", "x": -160, "y": -99 }, { "c": "ag", "x": -48, "y": 0 }, { "c": "gy", "x": -128, "y": -55 }, { "c": "nu", "x": -32, "y": -110 }, { "c": "to", "x": -128, "y": -143 }, { "c": "qa", "x": -32, "y": -121 }, { "c": "dm", "x": -80, "y": -33 }, { "c": "aw", "x": -208, "y": 0 }, { "c": "cz", "x": -16, "y": -33 }, { "c": "mk", "x": -160, "y": -88 }, { "c": "ax", "x": -224, "y": 0 }, { "c": "pk", "x": -160, "y": -110 }, { "c": "st", "x": -144, "y": -132 }, { "c": "bz", "x": 0, "y": -22 }, { "c": "br", "x": -176, "y": -11 }, { "c": "am", "x": -96, "y": 0 }, { "c": "bh", "x": -80, "y": -11 }, { "c": "gg", "x": -192, "y": -44 }, { "c": "um", "x": -256, "y": -143 }, { "c": "ga", "x": -96, "y": -44 }, { "c": "yt", "x": -240, "y": -154 }, { "c": "gd", "x": -128, "y": -44 }, { "c": "dj", "x": -48, "y": -33 }, { "c": "ss", "x": -128, "y": -132 }, { "c": "gt", "x": -80, "y": -55 }, { "c": "sk", "x": -16, "y": -132 }, { "c": "sm", "x": -48, "y": -132 }, { "c": "bd", "x": -16, "y": -11 }, { "c": "jo", "x": -208, "y": -66 }, { "c": "iq", "x": -96, "y": -66 }, { "c": "bt", "x": -208, "y": -11 }, { "c": "it", "x": -144, "y": -66 }, { "c": "mg", "x": -128, "y": -88 }, { "c": "sr", "x": -112, "y": -132 }, { "c": "sg", "x": -224, "y": -121 }, { "c": "ec", "x": -128, "y": -33 }, { "c": "ge", "x": -144, "y": -44 }, { "c": "ie", "x": 0, "y": -66 }, { "c": "kz", "x": -144, "y": -77 }, { "c": "tc", "x": -224, "y": -132 }, { "c": "tg", "x": 0, "y": -143 }, { "c": "lv", "x": -32, "y": -88 }, { "c": "mo", "x": -224, "y": -88 }, { "c": "mv", "x": -64, "y": -99 }, { "c": "sz", "x": -208, "y": -132 }, { "c": "va", "x": -48, "y": -154 }, { "c": "bn", "x": -144, "y": -11 }, { "c": "bj", "x": -112, "y": -11 }, { "c": "zm", "x": -16, "y": -165 }, { "c": "co", "x": -192, "y": -22 }]; const margin = { top: 10, right: 85, bottom: 65, left: 70 } const w = 1250 - margin.left - margin.right; const h = 500 - margin.top - margin.bottom; const svg = d3.select("#results") .append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom); var defs = svg.append("defs") .selectAll("pattern") .data(imagePos) .enter() .append("pattern") .attr("width", 16) .attr("height", 11) .attr("id", function(d) { return "pattern_" + dc; }); defs.append("image") .attr("xlink:href", "gMUNBQ/flags.png") .attr("x", (d) => dx) .attr("y", (d) => dy) .attr("width", "272") .attr("height", "176"); const simulation = d3.forceSimulation() .nodes(nodes); simulation .force("charge_force", d3.forceManyBody().strength(-3)) .force("center_force", d3.forceCenter(w / 2, h / 2)); const link = svg.append("g") .attr("class", "links") .selectAll("line") .data(links) .enter().append("line") .attr('stroke', 'black') .attr("stroke-width", 2); const node = svg.append("g") .attr("class", "nodes") .selectAll("g") .data(nodes) .enter() .append("g") node.append("rect") .attr("x", 0) .attr("Y", 0) .attr("width", 16) .attr("height", 11) .attr("fill", function(d) { return "url(#pattern_" + d.code + ")"; }); const link_force = d3.forceLink(links) simulation.force("links", link_force) simulation.on("tick", tickActions); function tickActions() { node .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")" }); link .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; }); } }); </script> </body> </html>
