我有the following codepen个正在尝试制作的网络图的D3力图。我正在努力与使链接/节点/组正确间隔的力量一起工作。下面是相同的代码：
function createData() {
var myData = {
"nodes": [
{"id":1,"organizationName":"Careem","acquirerName":"Uber","totalFundingAmountCurrencyInUsd":771700000,"color":"#e6194b"},{"id":2,"organizationName":"HotelTonight","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":126885000,"color":"#3cb44b"},{"id":3,"organizationName":"Tilt","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":62100000,"color":"#3cb44b"},{"id":4,"organizationName":"Blue Vision Labs","acquirerName":"Lyft","totalFundingAmountCurrencyInUsd":17000000,"color":"#ffe119"},{"id":5,"organizationName":"Kamcord","acquirerName":"Lyft","totalFundingAmountCurrencyInUsd":35270000,"color":"#ffe119"},{"id":6,"organizationName":"Astro Technology","acquirerName":"Slack","totalFundingAmountCurrencyInUsd":10000000,"color":"#4363d8"},{"id":7,"organizationName":"Luxury Retreats","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":16000000,"color":"#3cb44b"},{"id":8,"organizationName":"Gaest.com","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":3500000,"color":"#3cb44b"},{"id":9,"organizationName":"Luckey","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":3273602,"color":"#3cb44b"},{"id":10,"organizationName":"Trooly","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":10000000,"color":"#3cb44b"},{"id":11,"organizationName":"Kimono Labs","acquirerName":"Palantir Technologies","totalFundingAmountCurrencyInUsd":5000000,"color":"#f58231"},{"id":12,"organizationName":"deCarta","acquirerName":"Uber","totalFundingAmountCurrencyInUsd":62663148,"color":"#e6194b"},{"id":13,"organizationName":"Trip4real","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":3132649,"color":"#3cb44b"},{"id":14,"organizationName":"Cherry","acquirerName":"Lyft","totalFundingAmountCurrencyInUsd":5250000,"color":"#ffe119"},{"id":15,"organizationName":"Silk","acquirerName":"Palantir Technologies","totalFundingAmountCurrencyInUsd":3655900,"color":"#f58231"},{"id":16,"organizationName":"Sosh","acquirerName":"Postmates","totalFundingAmountCurrencyInUsd":16254000,"color":"#911eb4"},{"id":17,"organizationName":"URX","acquirerName":"Pinterest","totalFundingAmountCurrencyInUsd":15220000,"color":"#46f0f0"},{"id":18,"organizationName":"Accomable","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":458130,"color":"#3cb44b"},{"id":19,"organizationName":"JUMP Bikes","acquirerName":"Uber","totalFundingAmountCurrencyInUsd":11625000,"color":"#e6194b"},{"id":20,"organizationName":"Screenhero","acquirerName":"Slack","totalFundingAmountCurrencyInUsd":1800000,"color":"#4363d8"},{"id":21,"organizationName":"ChangeCoin","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":4250000,"color":"#3cb44b"},{"id":22,"organizationName":"HipChat","acquirerName":"Slack","totalFundingAmountCurrencyInUsd":100000,"color":"#4363d8"},{"id":23,"organizationName":"Complex Polygon","acquirerName":"Uber","totalFundingAmountCurrencyInUsd":1700000,"color":"#e6194b"},{"id":24,"organizationName":"YesGraph","acquirerName":"Lyft","totalFundingAmountCurrencyInUsd":2300000,"color":"#ffe119"},{"id":25,"organizationName":"Neumob","acquirerName":"Cloudflare","totalFundingAmountCurrencyInUsd":10900000,"color":"#f032e6"},{"id":26,"organizationName":"Swipe Labs","acquirerName":"Uber","totalFundingAmountCurrencyInUsd":8200000,"color":"#e6194b"},{"id":27,"organizationName":"Hey! Inc.","acquirerName":"Postmates","totalFundingAmountCurrencyInUsd":5500000,"color":"#911eb4"},{"id":28,"organizationName":"Vamo","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":1600000,"color":"#3cb44b"},{"id":29,"organizationName":"DailyBooth","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":7015000,"color":"#3cb44b"},{"id":30,"organizationName":"Livestar","acquirerName":"Pinterest","totalFundingAmountCurrencyInUsd":2000000,"color":"#46f0f0"},{"id":31,"organizationName":"Strikedeck","acquirerName":"Medallia","color":"#bcf60c"},{"id":32,"organizationName":"Localmind","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":650304,"color":"#3cb44b"},{"id":33,"organizationName":"Fleksy Inc. (Closed)","acquirerName":"Pinterest","totalFundingAmountCurrencyInUsd":5900000,"color":"#46f0f0"},{"id":34,"organizationName":"Leo","acquirerName":"Lyft","totalFundingAmountCurrencyInUsd":1500000,"color":"#ffe119"},{"id":35,"organizationName":"Bold","acquirerName":"Postmates","totalFundingAmountCurrencyInUsd":1000000,"color":"#911eb4"},{"id":36,"organizationName":"Hitch","acquirerName":"Lyft","totalFundingAmountCurrencyInUsd":600000,"color":"#ffe119"},{"id":37,"organizationName":"Poptip","acquirerName":"Palantir Technologies","totalFundingAmountCurrencyInUsd":2410000,"color":"#f58231"},{"id":38,"organizationName":"StopTheHacker","acquirerName":"Cloudflare","totalFundingAmountCurrencyInUsd":1100000,"color":"#f032e6"},{"id":39,"organizationName":"Propeller","acquirerName":"Palantir Technologies","totalFundingAmountCurrencyInUsd":1250000,"color":"#f58231"},{"id":40,"organizationName":"Fondu","acquirerName":"Airbnb","totalFundingAmountCurrencyInUsd":575000,"color":"#3cb44b"},{"id":41,"organizationName":"Rover","acquirerName":"Lyft","totalFundingAmountCurrencyInUsd":120000,"color":"#ffe119"},{"id":42,"organizationName":"Motivate","acquirerName":"Lyft","color":"#ffe119"},{"id":43,"organizationName":"Health Care DataWorks","acquirerName":"Health Catalyst","totalFundingAmountCurrencyInUsd":4999541,"color":"#fabebe"},{"id":44,"organizationName":"CryptoSeal","acquirerName":"Cloudflare","totalFundingAmountCurrencyInUsd":280000,"color":"#f032e6"},{"id":45,"organizationName":"Hackermeter","acquirerName":"Pinterest","totalFundingAmountCurrencyInUsd":120000,"color":"#46f0f0"},{"id":46,"organizationName":"MarketSnacks","acquirerName":"Robinhood","color":"#008080"},{"id":47,"organizationName":"Icebergs","acquirerName":"Pinterest","totalFundingAmountCurrencyInUsd":260533,"color":"#46f0f0"},{"id":48,"organizationName":"Geometric Intelligence","acquirerName":"Uber","color":"#e6194b"},{"id":49,"organizationName":"Stride","acquirerName":"Slack","color":"#4363d8"},{"id":50,"organizationName":"Instapaper","acquirerName":"Pinterest","color":"#46f0f0"},{"id":51,"organizationName":"DataScore","acquirerName":"Lyft","color":"#ffe119"},{"id":52,"organizationName":"Jelly HQ","acquirerName":"Pinterest","color":"#46f0f0"},{"id":53,"organizationName":"Neurotic Media","acquirerName":"Peloton","color":"#e6beff"},{"id":54,"organizationName":"Kampyle","acquirerName":"Medallia","totalFundingAmountCurrencyInUsd":1000000,"color":"#bcf60c"},{"id":55,"organizationName":"Medicity","acquirerName":"Health Catalyst","color":"#fabebe"},{"id":56,"organizationName":"Missions","acquirerName":"Slack","color":"#4363d8"},{"id":57,"organizationName":"Kosei","acquirerName":"Pinterest","color":"#46f0f0"},{"id":58,"organizationName":"Accoleo","acquirerName":"Airbnb","color":"#3cb44b"},{"id":59,"organizationName":"Deco Software","acquirerName":"Airbnb","color":"#3cb44b"},{"id":60,"organizationName":"Crashpadder","acquirerName":"Airbnb","color":"#3cb44b"},{"id":61,"organizationName":"tote","acquirerName":"Pinterest","color":"#46f0f0"},{"id":62,"organizationName":"Spaces","acquirerName":"Slack","color":"#4363d8"},{"id":63,"organizationName":"FinitePaths Inc.","acquirerName":"Lyft","color":"#ffe119"},{"id":64,"organizationName":"Curator & Co","acquirerName":"Pinterest","color":"#46f0f0"},{"id":65,"organizationName":"Payload Security","acquirerName":"CrowdStrike","color":"#9a6324"},{"id":66,"organizationName":"Lapka","acquirerName":"Airbnb","color":"#3cb44b"},{"id":67,"organizationName":"Eager","acquirerName":"Cloudflare","color":"#f032e6"},{"id":68,"organizationName":"FT Technologies","acquirerName":"Palantir Technologies","color":"#f58231"},{"id":69,"organizationName":"Voicegem","acquirerName":"Palantir Technologies","color":"#f58231"},{"id":70,"organizationName":"NabeWise","acquirerName":"Airbnb","color":"#3cb44b"},{"id":71,"organizationName":"Pencil Labs","acquirerName":"Airbnb","color":"#3cb44b"},{"id":72,"organizationName":"Pext","acquirerName":"Pinterest","color":"#46f0f0"},{"id":73,"organizationName":"Otto","acquirerName":"Uber","color":"#e6194b"},{"id":74,"organizationName":"Punchfork","acquirerName":"Pinterest","color":"#46f0f0"},{"id":75,"organizationName":"Event Enrichment HQ","acquirerName":"PagerDuty","color":"#fffac8"},{"id":76,"organizationName":"Hike Labs","acquirerName":"Pinterest","color":"#46f0f0"},{"id":77,"organizationName":"Math Camp","acquirerName":"Pinterest","color":"#46f0f0"},{"id":78,"organizationName":"VisualGraph","acquirerName":"Pinterest","color":"#46f0f0"},{"id":79,"organizationName":"AdBasis","acquirerName":"Airbnb","color":"#3cb44b"},{"id":80,"organizationName":"Conductor","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":60648126,"color":"#800000"},{"id":81,"organizationName":"Teem","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":21500000,"color":"#800000"},{"id":82,"organizationName":"Meetup","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":18300000,"color":"#800000"},{"id":83,"organizationName":"Euclid","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":43600000,"color":"#800000"},{"id":84,"organizationName":"Flatiron School","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":14500000,"color":"#800000"},{"id":85,"organizationName":"MissionU","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":11500000,"color":"#800000"},{"id":86,"organizationName":"Fieldlens","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":12910000,"color":"#800000"},{"id":87,"organizationName":"Unomy","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":4400000,"color":"#800000"},{"id":88,"organizationName":"Managed by Q","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":97425000,"color":"#800000"},{"id":89,"organizationName":"Naked Hub","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":33000000,"color":"#800000"},{"id":90,"organizationName":"Spacemob","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":5500000,"color":"#800000"},{"id":91,"organizationName":"Case","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":2250000,"color":"#800000"},{"id":92,"organizationName":"Welkio","acquirerName":"The We Company","totalFundingAmountCurrencyInUsd":400000,"color":"#800000"},{"id":93,"organizationName":"Uber","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":24712450000,"color":"#e6194b"},{"id":94,"organizationName":"Robinhood","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":539000000,"color":"#008080"},{"id":95,"organizationName":"Airbnb","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":4398082100,"color":"#3cb44b"},{"id":96,"organizationName":"Lyft","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":4912500000,"color":"#ffe119"},{"id":97,"organizationName":"Postmates","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":678010000,"color":"#911eb4"},{"id":98,"organizationName":"Pinterest","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":1466100000,"color":"#46f0f0"},{"id":99,"organizationName":"Medallia","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":325000000,"color":"#bcf60c"},{"id":100,"organizationName":"Slack","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":1391100000,"color":"#4363d8"},{"id":101,"organizationName":"Cloudflare","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":332050000,"color":"#f032e6"},{"id":102,"organizationName":"CrowdStrike","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":481000000,"color":"#9a6324"},{"id":103,"organizationName":"Health Catalyst","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":377000000,"color":"#fabebe"},{"id":104,"organizationName":"PagerDuty","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":173600000,"color":"#fffac8"},{"id":105,"organizationName":"Palantir Technologies","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":2028910015,"color":"#f58231"},{"id":106,"organizationName":"Peloton","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":994707000,"color":"#e6beff"},{"id":107,"organizationName":"The We Company","acquirerName":"N/A","totalFundingAmountCurrencyInUsd":12800000000,"color":"#800000"}],
"links": [
{"target":1,"source":93},{"target":2,"source":95},{"target":3,"source":95},{"target":4,"source":96},{"target":5,"source":96},{"target":6,"source":100},{"target":7,"source":95},{"target":8,"source":95},{"target":9,"source":95},{"target":10,"source":95},{"target":11,"source":105},{"target":12,"source":93},{"target":13,"source":95},{"target":14,"source":96},{"target":15,"source":105},{"target":16,"source":97},{"target":17,"source":98},{"target":18,"source":95},{"target":19,"source":93},{"target":20,"source":100},{"target":21,"source":95},{"target":22,"source":100},{"target":23,"source":93},{"target":24,"source":96},{"target":25,"source":101},{"target":26,"source":93},{"target":27,"source":97},{"target":28,"source":95},{"target":29,"source":95},{"target":30,"source":98},{"target":31,"source":99},{"target":32,"source":95},{"target":33,"source":98},{"target":34,"source":96},{"target":35,"source":97},{"target":36,"source":96},{"target":37,"source":105},{"target":38,"source":101},{"target":39,"source":105},{"target":40,"source":95},{"target":41,"source":96},{"target":42,"source":96},{"target":43,"source":103},{"target":44,"source":101},{"target":45,"source":98},{"target":46,"source":94},{"target":47,"source":98},{"target":48,"source":93},{"target":49,"source":100},{"target":50,"source":98},{"target":51,"source":96},{"target":52,"source":98},{"target":53,"source":106},{"target":54,"source":99},{"target":55,"source":103},{"target":56,"source":100},{"target":57,"source":98},{"target":58,"source":95},{"target":59,"source":95},{"target":60,"source":95},{"target":61,"source":98},{"target":62,"source":100},{"target":63,"source":96},{"target":64,"source":98},{"target":65,"source":102},{"target":66,"source":95},{"target":67,"source":101},{"target":68,"source":105},{"target":69,"source":105},{"target":70,"source":95},{"target":71,"source":95},{"target":72,"source":98},{"target":73,"source":93},{"target":74,"source":98},{"target":75,"source":104},{"target":76,"source":98},{"target":77,"source":98},{"target":78,"source":98},{"target":79,"source":95},{"target":80,"source":107},{"target":81,"source":107},{"target":82,"source":107},{"target":83,"source":107},{"target":84,"source":107},{"target":85,"source":107},{"target":86,"source":107},{"target":87,"source":107},{"target":88,"source":107},{"target":89,"source":107},{"target":90,"source":107},{"target":91,"source":107},{"target":92,"source":107}]
}
return(myData);
}
function dragstarted(d) {
if (!d3.event.active) {
simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
}
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;
}
var graphData = createData();
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(d => d.id))
.force("charge", d3.forceManyBody().strength(-5))
.force("collide", d3.forceCollide().radius(15).iterations(2))
.force("center", d3.forceCenter(width / 2, height / 2));
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graphData.links)
.enter().append("line")
.attr("stroke-width", d => Math.sqrt(d.value));
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graphData.nodes)
.enter()
.append("g")
var circles = node.append("circle")
.attr("r", d => Math.log(d.totalFundingAmountCurrencyInUsd))
// .attr("fill", "blue")
.attr("fill", d => d.color)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on('mouseover.tooltip', function(d) {
tooltip.transition()
.duration(300)
.style("opacity", .8);
tooltip.html("Name:" + d.organizationName)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 10) + "px");
})
.on("mouseout.tooltip", function() {
tooltip.transition()
.duration(100)
.style("opacity", 0);
})
.on("mousemove", function() {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 10) + "px");
})
var lables = node.append("text")
.text(function(d) {
return d.id;
})
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) { return d.id; });
simulation
.nodes(graphData.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graphData.links);
function ticked() {
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; });
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
}
// okay.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
text {
font-family: sans-serif;
font-size: 10px;
}
div.tooltip {
position: absolute;
background-color: white;
max-width; 200px;
height: auto;
padding: 1px;
border-style: solid;
border-radius: 4px;
border-width: 1px;
box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="960" height="600"></svg>
简而言之，我希望（1）没有一个节点重叠，（2）不同的组彼此更接近（没有重叠），（3）目标节点有点远离源节点（以便可以看到链接）。我正在努力将充电与碰撞相结合以实现这一目标，我们将不胜感激！