⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
G6.registerEdge('multipleLabelsEdge', {
drawShape(cfg, group) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const stroke = (cfg.style && cfg.style.stroke) || '#000';
const endArrow = (cfg.style && cfg.style.endArrow) || undefined;
const middlePoint = startPoint.y + Math.abs(startPoint.y - endPoint.y) / 2;
console.log(cfg);
let controlPoints = [];
if (cfg.controlPoints) {
controlPoints = cfg.controlPoints.map(point => ['L', point.x, point.y]);
}
const shape = group.addShape('path', {
attrs: {
stroke,
path: [
['M', startPoint.x, startPoint.y],
...controlPoints,
['L', endPoint.x, endPoint.y]
],
endArrow
},
name: 'path-shape'
});
if (cfg.primaryLabel) {
// the left label
group.addShape('text', {
attrs: {
text: cfg.primaryLabel,
fill: '#595959',
textAlign: 'center',
fontSize: 10,
x: endPoint.x,
y: middlePoint + 2
},
name: 'top-text-shape'
});
}
if (cfg.secondaryLabel) {
// the right label
group.addShape('text', {
attrs: {
text: cfg.secondaryLabel,
fill: '#595959',
fontSize: 8,
textAlign: 'center',
x: endPoint.x,
y: middlePoint + 10
},
name: 'bottom-text-shape'
});
}
return shape;
}
})
data = ({
nodes: [
{
id: 'node1',
label: 'node1'
},
{
id: 'node2',
label: 'node2'
},
{
id: 'node3',
label: 'node3'
}
],
edges: [
{
source: 'node1',
target: 'node2',
// The left and right labels
primaryLabel: 'Test 123',
secondaryLabel: 'Secondary info'
},
{
source: 'node1',
target: 'node3',
// The left and right labels
primaryLabel: 'Test 123',
secondaryLabel: 'Secondary info'
}
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
