Я новичок в d3.js.У меня есть разрозненная сеть, это означает, что в одном и том же файле у меня есть много небольших сетей, таких как:
a a
a b
a c
b a
b b
b c
c a
c b
c c
e e
e f
e g
f e
f f
f g
g e
g f
g g
В этом примере две раздельные сети, одна имеет [a,b,c] узлы, другие [e,f,g] узлы.
Я могу пометить только один узел на сеть, чтобы он был моим «концентратором» (не обязательно самим концентратором, концентраторы сильно связаны) или «выбранным», просто вставив 1, если он выбран, или 0, если он выбран.это не.
Теперь проблема в том, что: «На силовом ориентированном графе, как мне сохранить фиксированные концентраторы?».
На самом деле, что я действительно хотел бы, так это распределить в пространстве все сети, оставшиеся-вправо и сверху вниз, от самого большого до самого маленького (по количеству узлов).
Что я думал.Возьмите только концентраторы и присвойте x и y координаты и if (d.choose == 1){ //returns x,y}else{ //free coords}.
Проблема не в том, чтобы создать столбцы x и y, а в самом коде d3.js, который нужно сохранить.некоторые хоры заморожены.
Следуйте моему коду
<!DOCTYPE html>
<meta charset="utf-8">
<!-- width="2480" height="1720 -->
<svg width="2600" height="1020"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 6;
var simulation = d3.forceSimulation()
// One thing to consider is the overall strength, negative spaced, positive agglomerates
.force("charge", d3.forceManyBody().strength( function(d){
if ( d.choose == 1 ) { return -2;}
if ( d.choose == 0 ) { return -0.2; } } ) )
// Another issue is the distance + distance more distant the dots,
// d is the jason file, here it is accessing the d.id and d.line
.force("link", d3.forceLink().iterations(10).id(function(d) {
return d.id; }
).distance(function (d) {if (d.line == "none"){
return 15;}
else {
return 15;
}
}))
// center graph
.force("center", d3.forceCenter(width / 2, height / 2));
// load json file (?)
d3.json("genomes_net.json", function(error, graph) {
if (error) throw error;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
// draw line for each pair
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
// line color
.attr("stroke", function (d) {return d.colorsamp;})
// draw lines (% of total, or gradient?)
.attr("stroke-width", 1);
// draw circles for each node
var node = svg.append("g")
.attr("class","nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", (d) => {
if (d.choose == 0 ) {return 8;}
if (d.choose == 1) {return 16;}
})
//.style("fill", "#FF69B4") //function(d) { return d.colorsamp; })
.attr("fill", function(d) { return d.colorsamp ; })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
node.append("title")
.text(function(d) { return (d.name+ "\n" + d.lineage + " (" + d.genera +")"); });
var text = svg.append("g")
.attr("class","labels")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.text(function (d) {
if (d.direto == "yes"){
return d.id;
}
})
.attr("font-size", "8px")
.attr("font-family", "sans-serif")
.attr("dx", 15)
.attr("dy", ".31em")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.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("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
text
.attr("dx", function (d) {return d.x -20; })
.attr("dy", function (d) {return d.y + 15; })
}
});
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;
}
// Important notes:
// Understanding forces: https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03
//
</script>