0
Go.jsを使用してダイナミックリンクを作成する方法ダイナミックリンク - GoJS
以下のコードを使用して、静的値を使用して2つのカラーリンクを作成しました。その値を動的にしたい（範囲から取るべき）。
$ scope.model inColorとoutColorでそれぞれの開始と終了の色を表す色名を宣言しました。ここで
は私のコードとPlunkr例です：
scripts.js
var app = angular.module('app', []);
app.directive('goDiagram', function($http) {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
scope: {
model: '=goModel'
},
link: function(scope, element, attrs) {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
var rainbow = $(go.Brush, "Linear", {
0: "red",
1: "green"
});
var diagram = $(go.Diagram, element[0], {
nodeTemplate: $(go.Node, "Auto", {
locationSpot: go.Spot.Center
}, {
width: 120,
height: 15,
locationSpot: go.Spot.Center
},
new go.Binding("location"),
$(go.Shape, {
fill: "#e74c3c",
stroke: '#c0392b'
}, {
portId: "",
cursor: "pointer",
strokeWidth: 0,
}),
$(go.TextBlock, {
margin: 0,
stroke: "#eee"
},
new go.Binding("text", "key")
)
),
linkTemplate: $(go.Link, {
routing: go.Link.AvoidsNodes,
reshapable: true,
resegmentable: true
},
$(go.Shape,
{ strokeWidth: 3 , stroke: rainbow },
// new go.Binding("stroke", rainbow),
),
$(go.Shape, {
toArrow: "Standard"
}),
),
});
function updateAngular(e) {
if (e.isTransactionFinished) {
scope.$apply();
}
}
function updateSelection(e) {
diagram.model.selectedNodeData = null;
var it = diagram.selection.iterator;
while (it.next()) {
var selnode = it.value;
// ignore a selected link or a deleted node
if (selnode instanceof go.Node && selnode.data !== null) {
diagram.model.selectedNodeData = selnode.data;
break;
}
}
scope.$apply();
}
// watch scope
scope.$watch("model", function(newmodel) {
if (newmodel != undefined) {
var oldmodel = diagram.model;
if (oldmodel !== newmodel) {
diagram.removeDiagramListener("ChangedSelection", updateSelection);
diagram.model = newmodel;
diagram.addDiagramListener("ChangedSelection", updateSelection);
}
}
});
}
}
});
app.controller('appController', function($scope) {
$scope.init = function(d) {
$scope.hello = "Hello Plunker!!!!";
$scope.model = new go.GraphLinksModel(
[{
key: "Alpha",
color: "lightblue",
location: new go.Point(150, 130)
}, {
key: "Beta",
color: "orange",
location: new go.Point(350, 130)
}, {
key: "Gamma",
color: "lightgreen",
location: new go.Point(150, 230)
}, {
key: "Delta",
color: "pink"
}], [{
from: "Alpha",
to: "Beta",
inColor: "red",
outColor: "blue"
}, {
from: "Alpha",
to: "Gamma",
inColor: "yellow",
outColor: "blue"
}, {
from: "Beta",
to: "Gamma",
inColor: "green",
outColor: "pink"
}, {
from: "Gamma",
to: "Delta",
inColor: "black",
outColor: "red"
}, {
from: "Delta",
to: "Alpha",
inColor: "violet",
outColor: "green"
}]);
$scope.model.selectedNodeData = null;
}
});
index.htmlを
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://gojs.net/latest/release/go.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<div ng-init="init()">
<h1>{{hello}}</h1>
<go-diagram go-model="model" style="border: solid 1px black; width:100%; height:400px"></go-diagram>
</div>
</body>
</html>
線のぼかしを削除するために、線の線を正確に50％（inColor）と50％（outColor）で表示する方法。 –
カラーストップを0.0の代わりに0.4999、1.0ではなく0.5に変更します。 –
あなたは私にこの解決策を教えてもらえますか？https://stackoverflow.com/questions/46455546/spacingzoom-directive-gojs –