in src/chart/sankey/SankeyView.ts [114:346]
render(seriesModel: SankeySeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
const sankeyView = this;
const graph = seriesModel.getGraph();
const group = this.group;
const layoutInfo = seriesModel.layoutInfo;
// view width
const width = layoutInfo.width;
// view height
const height = layoutInfo.height;
const nodeData = seriesModel.getData();
const edgeData = seriesModel.getData('edge');
const orient = seriesModel.get('orient');
this._model = seriesModel;
group.removeAll();
group.x = layoutInfo.x;
group.y = layoutInfo.y;
// generate a bezire Curve for each edge
graph.eachEdge(function (edge) {
const curve = new SankeyPath();
const ecData = getECData(curve);
ecData.dataIndex = edge.dataIndex;
ecData.seriesIndex = seriesModel.seriesIndex;
ecData.dataType = 'edge';
const edgeModel = edge.getModel<SankeyEdgeItemOption>();
const lineStyleModel = edgeModel.getModel('lineStyle');
const curvature = lineStyleModel.get('curveness');
const n1Layout = edge.node1.getLayout();
const node1Model = edge.node1.getModel<SankeyNodeItemOption>();
const dragX1 = node1Model.get('localX');
const dragY1 = node1Model.get('localY');
const n2Layout = edge.node2.getLayout();
const node2Model = edge.node2.getModel<SankeyNodeItemOption>();
const dragX2 = node2Model.get('localX');
const dragY2 = node2Model.get('localY');
const edgeLayout = edge.getLayout();
let x1: number;
let y1: number;
let x2: number;
let y2: number;
let cpx1: number;
let cpy1: number;
let cpx2: number;
let cpy2: number;
curve.shape.extent = Math.max(1, edgeLayout.dy);
curve.shape.orient = orient;
if (orient === 'vertical') {
x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + edgeLayout.sy;
y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + n1Layout.dy;
x2 = (dragX2 != null ? dragX2 * width : n2Layout.x) + edgeLayout.ty;
y2 = dragY2 != null ? dragY2 * height : n2Layout.y;
cpx1 = x1;
cpy1 = y1 * (1 - curvature) + y2 * curvature;
cpx2 = x2;
cpy2 = y1 * curvature + y2 * (1 - curvature);
}
else {
x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + n1Layout.dx;
y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + edgeLayout.sy;
x2 = dragX2 != null ? dragX2 * width : n2Layout.x;
y2 = (dragY2 != null ? dragY2 * height : n2Layout.y) + edgeLayout.ty;
cpx1 = x1 * (1 - curvature) + x2 * curvature;
cpy1 = y1;
cpx2 = x1 * curvature + x2 * (1 - curvature);
cpy2 = y2;
}
curve.setShape({
x1: x1,
y1: y1,
x2: x2,
y2: y2,
cpx1: cpx1,
cpy1: cpy1,
cpx2: cpx2,
cpy2: cpy2
});
curve.useStyle(lineStyleModel.getItemStyle());
// Special color, use source node color or target node color
applyCurveStyle(curve.style, orient, edge);
const defaultEdgeLabelText = `${edgeModel.get('value')}`;
const edgeLabelStateModels = getLabelStatesModels(edgeModel, 'edgeLabel');
setLabelStyle(
curve, edgeLabelStateModels,
{
labelFetcher: {
getFormattedLabel(dataIndex, stateName, dataType, labelDimIndex, formatter, extendParams) {
return seriesModel.getFormattedLabel(
dataIndex, stateName, 'edge',
labelDimIndex,
// ensure edgeLabel formatter is provided
// to prevent the inheritance from `label.formatter` of the series
retrieve3(
formatter,
edgeLabelStateModels.normal && edgeLabelStateModels.normal.get('formatter'),
defaultEdgeLabelText
),
extendParams
);
}
},
labelDataIndex: edge.dataIndex,
defaultText: defaultEdgeLabelText
}
);
curve.setTextConfig({ position: 'inside' });
const emphasisModel = edgeModel.getModel('emphasis');
setStatesStylesFromModel(curve, edgeModel, 'lineStyle', (model) => {
const style = model.getItemStyle();
applyCurveStyle(style, orient, edge);
return style;
});
group.add(curve);
edgeData.setItemGraphicEl(edge.dataIndex, curve);
const focus = emphasisModel.get('focus');
toggleHoverEmphasis(
curve,
focus === 'adjacency' ? edge.getAdjacentDataIndices()
: focus === 'trajectory' ? edge.getTrajectoryDataIndices()
: focus,
emphasisModel.get('blurScope'),
emphasisModel.get('disabled')
);
});
// Generate a rect for each node
graph.eachNode(function (node) {
const layout = node.getLayout();
const itemModel = node.getModel<SankeyNodeItemOption>();
const dragX = itemModel.get('localX');
const dragY = itemModel.get('localY');
const emphasisModel = itemModel.getModel('emphasis');
const borderRadius = itemModel.get(['itemStyle', 'borderRadius']) as number | number[] || 0;
const rect = new graphic.Rect({
shape: {
x: dragX != null ? dragX * width : layout.x,
y: dragY != null ? dragY * height : layout.y,
width: layout.dx,
height: layout.dy,
r: borderRadius
},
style: itemModel.getModel('itemStyle').getItemStyle(),
z2: 10
});
setLabelStyle(
rect, getLabelStatesModels(itemModel),
{
labelFetcher: {
getFormattedLabel(dataIndex, stateName) {
return seriesModel.getFormattedLabel(dataIndex, stateName, 'node');
}
},
labelDataIndex: node.dataIndex,
defaultText: node.id
}
);
(rect as ECElement).disableLabelAnimation = true;
rect.setStyle('fill', node.getVisual('color'));
rect.setStyle('decal', node.getVisual('style').decal);
setStatesStylesFromModel(rect, itemModel);
group.add(rect);
nodeData.setItemGraphicEl(node.dataIndex, rect);
getECData(rect).dataType = 'node';
const focus = emphasisModel.get('focus');
toggleHoverEmphasis(
rect,
focus === 'adjacency'
? node.getAdjacentDataIndices()
: focus === 'trajectory'
? node.getTrajectoryDataIndices()
: focus,
emphasisModel.get('blurScope'),
emphasisModel.get('disabled')
);
});
nodeData.eachItemGraphicEl(function (el: graphic.Rect, dataIndex: number) {
const itemModel = nodeData.getItemModel<SankeyNodeItemOption>(dataIndex);
if (itemModel.get('draggable')) {
el.drift = function (this: typeof el, dx, dy) {
sankeyView._focusAdjacencyDisabled = true;
this.shape.x += dx;
this.shape.y += dy;
this.dirty();
api.dispatchAction({
type: 'dragNode',
seriesId: seriesModel.id,
dataIndex: nodeData.getRawIndex(dataIndex),
localX: this.shape.x / width,
localY: this.shape.y / height
});
};
el.ondragend = function () {
sankeyView._focusAdjacencyDisabled = false;
};
el.draggable = true;
el.cursor = 'move';
}
});
if (!this._data && seriesModel.isAnimationEnabled()) {
group.setClipPath(createGridClipShape(group.getBoundingRect(), seriesModel, function () {
group.removeClipPath();
}));
}
this._data = seriesModel.getData();
}