В моем приложении я динамически добавляю узлы или ссылки в свой график. Но нет никаких эффектов, переходов, новых я делаю. Как я могу использовать addLinkData с анимацией?
Как анимировать новую ссылку в goJS
Ответы (1)
Вот полный пример:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"LinkDrawn": function(e) {
var link = e.subject;
link.isSelected = false;
var orig = link.toShortLength;
link.toShortLength = 2;
var anim = new go.Animation();
var sw = link.path.strokeWidth;
anim.add(link.path, "strokeWidth", sw, sw+5);
anim.add(link.elt(1), "strokeWidth", sw, sw+5);
anim.reversible = true;
anim.finished = function(a) { link.toShortLength = orig; link.isSelected = true; };
anim.start();
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
);
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
]);
}
В основном это типичные простые шаблоны и модели, которые вы можете прочитать на https://gojs.net/learn и https://gojs.net/intro. Единственное, что относится к настраиваемой анимации, - это прослушиватель DiagramEvent LinkDrawn, который создает Animation и анимирует внешний вид пути ссылки (Link.path , Форма).
Дополнительные сведения об анимации см. На странице https://gojs.net/latest/intro/animation.html и https://gojs.net/latest/api/symbols/Animation.html.
person
Walter Northwoods
schedule
20.01.2020
событие LinkDrawn не запускается при добавлении через addLinkData
- person Jonathan; 18.03.2020
Это правда - событие LinkDrawn возникает, когда пользователь интерактивно нарисовал новую ссылку. Тем не менее, приведенный выше код можно применить к ссылке, созданной из-за вызова GraphLinksModel.addLinkData.
- person Walter Northwoods; 18.03.2020
myDiagram.model.addLinkData({ key: "leaf5", parent: "leaf3" })
, и я не знаю, как объединить этот метод с анимацией. @WalterNorthwoods - person Deborah Vancelotte   schedule 21.01.2020