Instead of appending circles, we can append a path. The data holds the "d" attribute that makes the shape
Last active
August 29, 2015 14:03
-
-
Save danharr/106dcdeeafd667ec56b0 to your computer and use it in GitHub Desktop.
Custom Shapes in Force Diagram
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .link { | |
| stroke: black; | |
| stroke-opacity: 0.5; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 1960, | |
| height = 1800; | |
| var color = d3.scale.category20(); | |
| var force = d3.layout.force() | |
| .charge(-4000) | |
| .linkDistance(450) | |
| .size([width, height]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("raw.json", function(error, graph) { | |
| force | |
| .nodes(graph.nodes) | |
| .links(graph.links) | |
| .start(); | |
| var link = svg.selectAll(".link") | |
| .data(graph.links) | |
| .enter().append("line") | |
| .attr("class", "link") | |
| .style("stroke-width", function(d) { return 10; }); | |
| var circle = svg.append("g").selectAll(".node") | |
| .data(graph.nodes) | |
| .enter().append("path").attr("d",function(d) {return d.shape;}) | |
| .style("stroke","black") | |
| .style("stroke-width",3) | |
| .style("fill","black") | |
| .attr("class", "node") | |
| //.attr("transform", function(d) { return "translate("+d.y + "," +d.x + ")" ;}) | |
| .call(force.drag); | |
| /*var text = svg.append("g").selectAll(".text") | |
| .data(graph.nodes) | |
| .enter() | |
| .append("text") | |
| .attr("x",0) | |
| .attr("y",".31em") | |
| .text(function(d) {return d.name;}) | |
| .style("fill","black") | |
| .style("font-family","helvetica") | |
| .style("font-size",function(d) {return 15;})*/ | |
| force.on("tick", function() { | |
| 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; }); | |
| circle.attr("transform", function(d) { return "translate("+(d.x -d.offx)+ "," +(d.y-d.offy) + ")" ;}); | |
| /*text.attr("x", function(d) { return d.x; }) | |
| .attr("y", function(d) { return d.y+(d.size*10); });*/ | |
| }); | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "links":[ | |
| { | |
| "source":0, | |
| "target":1 | |
| }, | |
| { | |
| "source":0, | |
| "target":2 | |
| } | |
| ], | |
| "nodes":[ | |
| { | |
| "name":"PS4", | |
| "size":4, | |
| "shape":"M122.908+54.0705L122.908+30.0905C122.908+25.1985+125.191+21.6953+130.061+21.6953L160.098+21.6953C160.282+21.6953+160.459+21.5129+160.459+21.3321L160.459+16.5609C160.459+16.5193+160.447+16.4785+160.431+16.4393L123.704+16.4393C115.743+17.4513+111.854+22.9993+111.854+30.0905L111.854+54.0697C111.854+58.9617+109.507+62.4657+104.702+62.4657L72.9806+62.4657C72.8006+62.4657+72.6198+62.5865+72.6198+62.8281L72.6198+67.6001C72.6198+67.7977+72.7415+67.9489+72.8838+67.9993L108.899+67.9993C118.286+67.7529+122.908+61.7601+122.908+54.0705M-0.497726+68.0001L10.0487+68.0001C10.1911+67.9497+10.3127+67.7985+10.3127+67.6009L10.3127+52.3185C10.3127+47.4265+13.0759+44.0433+17.1015+44.0433L60.5423+44.0433C70.3359+44.0433+75.0831+38.0033+75.0831+30.0905C75.0831+22.9993+71.1975+17.4513+63.2327+16.4393L-0.692932+16.4393C-0.711334+16.4793-0.742523+16.5105-0.742523+16.5609L-0.742523+21.3321C-0.742523+21.5737-0.622528+21.6953-0.382538+21.6953L56.8767+21.6953C61.7439+21.6953+64.0271+25.1985+64.0271+30.0905C64.0271+34.9833+61.7439+38.4865+56.8766+38.4865L11.5742+38.4865C4.54465+38.4865-0.742554+44.4673-0.742554+52.3185L-0.742554+67.6009C-0.743332+67.7985-0.658539+67.9489-0.497726+68.0001M169.59+56.9089L217.962+56.9089C218.139+56.9089+218.323+56.7273+218.323+56.5465L218.323+26.7689C218.323+26.1049+217.721+26.0441+217.418+26.2857L169.293+56.0641C168.989+56.2457+168.869+56.4265+168.933+56.6681C168.989+56.7889+169.173+56.9089+169.59+56.9089M160.283+62.4665L217.963+62.4665C218.14+62.4665+218.26+62.5873+218.26+62.7081L218.26+67.6009C218.26+67.8425+218.444+67.9633+218.621+67.9633L229.017+67.9633C229.201+67.9633+229.377+67.8425+229.377+67.6009L229.377+62.8289C229.377+62.6473+229.561+62.4665+229.737+62.4665L240.07+62.4665C240.311+62.4665+240.431+62.2849+240.431+62.1049L240.431+57.2721C240.431+57.0905+240.311+56.9097+240.07+56.9097L229.737+56.9097C229.561+56.9097+229.377+56.7281+229.377+56.5473L229.377+21.6953C229.377+18.8513+228.32+17.0401+226.543+16.4393L223.535+16.4393C222.597+16.6801+221.578+17.1113+220.485+17.7681L158.361+56.1241C155.957+57.6337+155.115+59.3241+155.717+60.5929C156.197+61.6809+157.575+62.4665+160.283+62.4665ZM169.293+56.0641L217.419+26.2857C217.722+26.0441+218.324+26.1049+218.324+26.7689L218.324+56.5473C218.324+56.7289+218.14+56.9097+217.963+56.9097L169.591+56.9097C169.174+56.9097+168.989+56.7897+168.933+56.6681C168.869+56.4265+168.989+56.2449+169.293+56.0641", | |
| "offx":122.9, | |
| "offy":54.1 | |
| }, | |
| { | |
| "name":"Wii U", | |
| "size":1, | |
| "shape":"M564.044+72.0447C564.044+119.621+620.294+112.817+620.294+79.5448L620.294+0.794801L564.044+0.794801L564.044+72.0447L564.044+72.0447ZM486.544+122.045C486.544+145.551+502.78+159.545+526.544+159.545L661.544+159.545C681.595+159.545+697.794+145.7+697.794+125.795L697.794+27.0447C697.794+15.0481+688.854+2.04487+677.795+2.04487L646.544+2.04487L646.544+83.2947C646.544+145.005+539.044+144.53+539.044+84.5448L539.044+0.794795L515.294+0.794795C499.832+0.794795+486.544+10.5917+486.544+25.7946L486.544+122.045L486.544+122.045ZM299.681+24.137C299.681+36.9688+310.486+47.7745+323.993+47.7745C338.176+47.7745+349.319+37.3061+349.319+24.1371C349.319+10.9676+338.176+0.500005+323.993+0.500005C310.486+0.500005+299.681+10.9676+299.681+24.1371L299.681+24.137ZM345.606+206.482L345.606+71.0738L303.733+71.0738L303.733+206.482L345.606+206.482ZM384.437+24.137C384.437+36.9688+395.58+47.7745+409.087+47.7745C422.932+47.7745+434.075+37.3061+434.075+24.1371C434.075+10.9676+422.932+0.500005+409.087+0.500005C395.58+0.500005+384.437+10.9676+384.437+24.1371L384.437+24.137ZM430.362+206.482L430.362+71.0738L388.49+71.0738L388.49+206.482L430.362+206.482ZM237.211+11.9807L200.741+155.493C200.741+155.493+172.715+47.7745+167.987+32.2409C163.597+17.0458+154.142+10.2923+140.973+10.2923C127.466+10.2923+118.349+17.0458+113.621+32.2409C109.232+47.7745+81.2045+155.493+81.2045+155.493L44.398+11.9807L0.499988+11.9807C0.499988+11.9807+42.7096+164.948+48.4501+182.845C52.8396+196.689+63.6456+207.832+79.1784+207.832C97.4126+207.832+105.855+194.663+109.569+182.845C113.621+170.688+140.973+69.7231+140.973+69.7231C140.973+69.7231+168.324+170.688+172.039+182.845C176.091+194.663+184.533+207.832+202.43+207.832C218.301+207.832+228.769+196.689+233.496+182.845C239.236+164.948+281.446+11.9807+281.446+11.9807L237.211+11.9807L237.211+11.9807Z", | |
| "offx":564, | |
| "offy":72 | |
| }, | |
| { | |
| "name":"Xbox", | |
| "size":1.5, | |
| "shape":"M91.9477+5.34099L91.9477+18.9551L81.9196+5.33083L80.2759+5.32771L80.2759+21.9035L82.1196+21.9035L82.1196+8.5906L91.9462+21.9144L93.7946+21.916L93.7946+5.34099L91.9477+5.34099ZM70.6883+4.95622C66.0274+4.95622+62.7696+8.52107+62.7696+13.6242C62.7696+18.7355+66.0274+22.2996+70.6883+22.2996C75.3446+22.2996+78.5915+18.7355+78.5915+13.6242C78.5915+8.52107+75.3446+4.95622+70.6883+4.95622M70.6883+20.5433C67.1383+20.5433+64.6493+17.698+64.6493+13.6242C64.6493+9.55388+67.1383+6.70818+70.6883+6.70818C74.2337+6.70818+76.7071+9.55388+76.7071+13.6242C76.7072+17.698+74.2337+20.5433+70.6884+20.5433M97.7275+20.2949L97.7275+14.1613L106.852+14.1613L106.852+12.5386L97.7275+12.5386L97.7275+6.95154L107.473+6.95154L107.473+5.33005L95.868+5.33005L95.868+21.9175L107.587+21.9175L107.587+20.2949L97.7275+20.2949ZM57.5743+21.9316L52.2759+14.7375L46.9802+21.9316L44.7974+21.9316L51.1696+13.2398L45.3512+5.3406L47.5325+5.3406L52.2759+11.784L57.0149+5.3406L59.1946+5.3406L53.379+13.2398L59.754+21.9316L57.5743+21.9316ZM28.4028+13.8675C28.0567+13.5726+27.6809+13.3445+27.3161+13.1758C28.52+12.5222+29.3098+11.2871+29.3098+9.85427C29.3098+8.79255+28.9184+5.34138+23.9169+5.34138L17.1802+5.34138L17.1802+12.4933L14.9356+12.4933C14.6434+12.8726+13.9833+13.7836+13.7309+14.1582L17.1802+14.1582L17.1802+21.93L23.9169+21.9308C27.5661+21.9308+29.8341+20.0769+29.8341+17.0879C29.8341+15.7816+29.3403+14.6711+28.4028+13.8676M19.0427+7.07185L23.9169+7.07185C25.2372+7.07185+27.4458+7.40037+27.4458+9.70857C27.4458+11.4535+26.1583+12.4933+23.9169+12.4933L19.0427+12.4933L19.0427+7.07185L19.0427+7.07185ZM23.9169+20.2004L19.0427+20.2004L19.0427+14.1605L23.9169+14.1605C25.7653+14.1605+27.9762+14.6711+27.9762+17.0519C27.9762+19.7894+25.4341+20.2004+23.9169+20.2004M38.5966+4.9574C33.9372+4.9574+30.6802+8.52224+30.6802+13.6254C30.6802+18.7363+33.9372+22.2988+38.5966+22.2988C43.2528+22.2988+46.4997+18.7363+46.4997+13.6254C46.4997+8.52224+43.2528+4.9574+38.5965+4.9574M38.5965+20.5441C35.0465+20.5441+32.5598+17.6988+32.5598+13.6254C32.5598+9.55505+35.0465+6.71052+38.5965+6.71052C42.1411+6.71052+44.6153+9.55505+44.6153+13.6254C44.6153+17.6988+42.1411+20.5441+38.5966+20.5441M16.2739+21.9301L9.89656+13.2394L15.7161+5.34099L13.5356+5.34099L8.79187+11.7859L4.05203+5.34099L1.87782+5.34099L7.69344+13.2394L1.31688+21.9301L3.50125+21.9301L8.795+14.7379L14.0919+21.9301L16.2739+21.9301Z", | |
| "offx":91.9, | |
| "offy":5.3 | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment