绘制死锁图(使用函数)并添加缩放功能

Question

我正在使用Highcharts。我需要像jsFiddle示例中那样绘制死锁图：https://jsfiddle.net/1wksg5jn/263/并增加了去鳞能力。取而代之的是：

ren.label('Server process id: 2<br/>Server batch Id:2<br/>Execution context:<br/>Deadlock', 440, 120)
.attr({
fill: 'transparent',
stroke: 'black',
padding: 20,
r: 80
})
.add()
.shadow(true);
ren.label('Key lock: 1', 240, 70)
.attr {
r: 2,
width: 105,
height: 70,
fill: 'lightgray'
})
.add();

我想使用以下函数绘制死锁图元素：

function DrawEllipse(label, positionX, positionY) {
.attr({
fill: 'transparent',
stroke: 'black',
padding: 20,
r: 80
}).add();
}
function DrawKeyLockTable(label, positionX, positionY) {
.attr({
r: 2,
width: 105,
height: 70,
fill: 'lightgray'
}).add();
}

并在我的代码中调用这些函数。

Answer 1

您可以通过以下方式创建函数来绘制SVG元素：

function drawEllipse(label, positionX, positionY) {
ren.label(label, positionX, positionY).attr({
r: 80,
padding: 20,
width: 105,
height: 70,
fill: 'lightgray'
}).add();
}
function drawKeyLockTable(label, positionX, positionY) {
ren.label(label, positionX, positionY).attr({
r: 2,
width: 105,
height: 70,
fill: 'lightgray'
}).add();
}

现场演示：https://jsfiddle.net/BlackLabel/7sympovh/