Если вы просто хотите соответствовать стилю ссылок, вам не нужно погружаться в код d3-force, он только вычисляет положение, а не что-либо связанное со стилем.
Каждая ссылка имеет значения x и y как для источника, так и для цели. Если вы замените найденную линию, связывающую источник и цель в большинстве примеров силового макета, с путем, вы можете использовать эти значения x и y, чтобы в значительной степени стилизовать любой тип ссылки, которую вы хотите.
Я использую d3v4 + ниже - ваши примеры используют d3v3.
Вариант 1. Использование встроенных ссылок
В d3v3 вы бы использовали d3.svg.diagonal
, но теперь есть d3.linkVertical()
и d3.linkHorizontal()
для достижения того же самого. С этим мы можем использовать:
d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; }));
А затем формировать пути, представляющие ссылки с помощью:
link.attr("d",d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; }));
Я только выполнил вертикальное моделирование ниже - но вы могли бы определить, больше ли разница в координатах x, чем координаты y, чтобы определить, следует ли применять горизонтальное или вертикальное моделирование.
var svg = d3.select("svg");
var nodes = "abcdefg".split("").map(function(d) {
return {name:d};
})
var links = "bcdef".split("").map(function(d) {
return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }))
.force("charge", d3.forceManyBody().strength(-1000))
.force("center", d3.forceCenter(250,150));
var node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
var link = svg.append("g")
.selectAll("path")
.data(links)
.enter().append("path")
simulation
.nodes(nodes)
.on("tick", ticked)
.force("link")
.links(links);
function ticked() {
link.attr("d", d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; }));
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
path {
stroke: black;
stroke-width: 2px;
fill:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">
Вариант 2 - указание пути вручную
Мы можем заменить строку, используемую для соединения узлов, с путем, мы можем предоставить атрибут d
пути вручную, учитывая, что базовая точка пути содержит x, y цели и источника. Возможно что-то вроде:
path.attr("d", function(d) {
var x0 = d.source.x;
var y0 = d.source.y;
var x1 = d.target.x;
var y1 = d.target.y;
var xcontrol = x1 * 0.5 + x0 * 0.5;
return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
})
Опять же, здесь я сделал только один стиль, на этот раз горизонтальный, но добавление проверки, чтобы увидеть, нужны ли горизонтальные или вертикальные ссылки, должно быть довольно простым:
var svg = d3.select("svg");
var nodes = "abcdefg".split("").map(function(d) {
return {name:d};
})
var links = "bcdef".split("").map(function(d) {
return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }))
.force("charge", d3.forceManyBody().strength(-1000))
.force("center", d3.forceCenter(250,150));
var node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
var link = svg.append("g")
.selectAll("path")
.data(links)
.enter().append("path")
simulation
.nodes(nodes)
.on("tick", ticked)
.force("link")
.links(links);
function ticked() {
link.attr("d", function(d) {
var x0 = d.source.x;
var y0 = d.source.y;
var x1 = d.target.x;
var y1 = d.target.y;
var xcontrol = x1 * 0.5 + x0 * 0.5;
return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
})
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
path {
stroke: black;
stroke-width: 2px;
fill:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">
Вариант 3 - Использовать генератор пользовательских кривых
Я включил это, потому что я только что ответил на вопрос о пользовательских кривых, который случайно использует тот же стиль. Таким образом, мы можем определить путь каждой ссылки с помощью:
var line = d3.line().curve(d3.someCurve))
и
link.attr("d", function(d) {
return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
})
Я добавил пару строк для построения на примере выше, кривые могут быть вертикальными или горизонтальными:
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
if (Math.abs(this.x0 - x) > Math.abs(this.y0 - y)) {
var x1 = this.x0 * 0.5 + x * 0.5;
this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);
}
else {
var y1 = this.y0 * 0.5 + y * 0.5;
this._context.bezierCurveTo(this.x0,y1,x,y1,x,y);
}
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
var svg = d3.select("svg");
var line = d3.line()
.curve(curve);
var nodes = "abcdefg".split("").map(function(d) {
return {name:d};
})
var links = "bcdef".split("").map(function(d) {
return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }))
.force("charge", d3.forceManyBody().strength(-1000))
.force("center", d3.forceCenter(250,150));
var node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
var link = svg.append("g")
.selectAll("path")
.data(links)
.enter().append("path")
//.attr("stroke","black")
//.attr("stroke-width", 2);
simulation
.nodes(nodes)
.on("tick", ticked)
.force("link")
.links(links);
function ticked() {
link.
attr("d", function(d) {
return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
})
//.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; })
.attr("cy", function(d) { return d.y; });
}
path {
stroke: black;
stroke-width: 2px;
fill:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">
Эта опция также будет работать с canvas (как и опция 1, если я не ошибаюсь).