Skip to content

Commit ee7088a

Browse files
antoinergantoinerg
committed
generate link path appropriately, reattach mouse events
1 parent 1ad9586 commit ee7088a

File tree

1 file changed

+52
-46
lines changed

1 file changed

+52
-46
lines changed

‎src/traces/sankey/render.js

Lines changed: 52 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ function sankeyModel(layout, d, traceIndex) {
126126
function linkModel(d, l, i) {
127127
var tc = tinycolor(l.color);
128128
var basicKey = l.source.label + '|' + l.target.label;
129+
var key = basicKey + '__' + i;
129130
// var foundKey = uniqueKeys[basicKey];
130131
// uniqueKeys[basicKey] = (foundKey || 0) + 1;
131132
// var key = basicKey + '__' + uniqueKeys[basicKey];
@@ -135,7 +136,7 @@ function linkModel(d, l, i) {
135136
l.curveNumber = d.trace.index;
136137

137138
return {
138-
key: basicKey,
139+
key: key,
139140
traceId: d.key,
140141
pointNumber: l.pointNumber,
141142
link: l,
@@ -166,7 +167,7 @@ function nodeModel(d, n, i) {
166167
var basicKey = n.label;
167168
// var foundKey = uniqueKeys[basicKey];
168169
// uniqueKeys[basicKey] = (foundKey || 0) + 1;
169-
// var key = basicKey + '__' + uniqueKeys[basicKey];
170+
var key = basicKey + '__' + i;
170171

171172
// for event data
172173
n.trace = d.trace;
@@ -180,8 +181,8 @@ function nodeModel(d, n, i) {
180181
x1: n.x1,
181182
y0: n.y0,
182183
y1: n.y1,
183-
key: basicKey,
184-
traceId: basicKey,
184+
key: key,
185+
traceId: d.key,
185186
node: n,
186187
nodePad: d.nodePad,
187188
nodeLineColor: d.nodeLineColor,
@@ -237,7 +238,7 @@ function sizeNode(rect) {
237238
.attr('height', function(d) {return d.y1 - d.y0;});
238239
}
239240

240-
function salientEnough(d) {return (d.y0 - d.y1) > 1 || d.linkLineWidth > 0;}
241+
function salientEnough(d) {return (d.y0 - d.y1) > 1 || d.link.width > 0 || d.linkLineWidth > 0;}
241242

242243
function sankeyTransform(d) {
243244
var offset = 'translate(' + d.translateX + ',' + d.translateY + ')';
@@ -260,38 +261,38 @@ function nodeTextColor(d) {return d.darkBackground && !d.horizontal ? 'rgb(255,2
260261
function nodeTextOffset(d) {return d.horizontal && d.left ? '100%' : '0%';}
261262

262263
// // event handling
263-
//
264-
// function attachPointerEvents(selection, sankey, eventSet) {
265-
// selection
266-
// .on('.basic', null) // remove any preexisting handlers
267-
// .on('mouseover.basic', function(d) {
268-
// if(!d.interactionState.dragInProgress) {
269-
// eventSet.hover(this, d, sankey);
270-
// d.interactionState.hovered = [this, d];
271-
// }
272-
// })
273-
// .on('mousemove.basic', function(d) {
274-
// if(!d.interactionState.dragInProgress) {
275-
// eventSet.follow(this, d);
276-
// d.interactionState.hovered = [this, d];
277-
// }
278-
// })
279-
// .on('mouseout.basic', function(d) {
280-
// if(!d.interactionState.dragInProgress) {
281-
// eventSet.unhover(this, d, sankey);
282-
// d.interactionState.hovered = false;
283-
// }
284-
// })
285-
// .on('click.basic', function(d) {
286-
// if(d.interactionState.hovered) {
287-
// eventSet.unhover(this, d, sankey);
288-
// d.interactionState.hovered = false;
289-
// }
290-
// if(!d.interactionState.dragInProgress) {
291-
// eventSet.select(this, d, sankey);
292-
// }
293-
// });
294-
// }
264+
265+
function attachPointerEvents(selection, sankey, eventSet) {
266+
selection
267+
.on('.basic', null) // remove any preexisting handlers
268+
.on('mouseover.basic', function(d) {
269+
if(!d.interactionState.dragInProgress) {
270+
eventSet.hover(this, d, sankey);
271+
d.interactionState.hovered = [this, d];
272+
}
273+
})
274+
.on('mousemove.basic', function(d) {
275+
if(!d.interactionState.dragInProgress) {
276+
eventSet.follow(this, d);
277+
d.interactionState.hovered = [this, d];
278+
}
279+
})
280+
.on('mouseout.basic', function(d) {
281+
if(!d.interactionState.dragInProgress) {
282+
eventSet.unhover(this, d, sankey);
283+
d.interactionState.hovered = false;
284+
}
285+
})
286+
.on('click.basic', function(d) {
287+
if(d.interactionState.hovered) {
288+
eventSet.unhover(this, d, sankey);
289+
d.interactionState.hovered = false;
290+
}
291+
if(!d.interactionState.dragInProgress) {
292+
eventSet.select(this, d, sankey);
293+
}
294+
});
295+
}
295296
//
296297
// function attachDragHandler(sankeyNode, sankeyLink, callbacks) {
297298
//
@@ -433,22 +434,27 @@ module.exports = function(svg, calcData, layout, callbacks) {
433434
return d.sankey().links
434435
.filter(function(l) {return l.value;})
435436
.map(linkModel.bind(null, d));
436-
}, keyFun)
437+
}, keyFun);
438+
437439
sankeyLink
438440
.enter().append('path')
439-
.attr('d', linkPath());
440-
// .call(attachPointerEvents, sankey, callbacks.linkEvents);
441+
.classed(c.cn.sankeyLink, true)
442+
.attr('d', linkPath())
443+
.call(attachPointerEvents, sankey, callbacks.linkEvents);
441444

442445
sankeyLink
443446
.style('stroke', function(d) {
444-
return salientEnough(d) ? Color.tinyRGB(tinycolor(d.linkLineColor)) : d.tinyColorHue;
447+
// return salientEnough(d) ? Color.tinyRGB(tinycolor(d.linkLineColor)) : d.tinyColorHue;
448+
return d.tinyColorHue;
445449
})
446450
.style('stroke-opacity', function(d) {
447-
return salientEnough(d) ? Color.opacity(d.linkLineColor) : d.tinyColorAlpha;
451+
// return salientEnough(d) ? Color.opacity(d.linkLineColor) : d.tinyColorAlpha;
452+
return d.tinyColorAlpha;
448453
})
449-
.style('stroke-width', function(d) {return salientEnough(d) ? d.linkLineWidth : 1;})
450-
.style('fill', function(d) {return d.tinyColorHue;})
451-
.style('fill-opacity', function(d) {return d.tinyColorAlpha;});
454+
.style('stroke-width', function(d) {return salientEnough(d) ? d.link.width : 1;});
455+
// Uncomment the following if the link isn't a simple SVG path element
456+
// .style('fill', function(d) {return d.tinyColorHue;})
457+
// .style('fill-opacity', function(d) {return d.tinyColorAlpha;});
452458

453459
sankeyLink.transition()
454460
.ease(c.ease).duration(c.duration)
@@ -489,7 +495,7 @@ module.exports = function(svg, calcData, layout, callbacks) {
489495
.append('g')
490496
.classed(c.cn.sankeyNode, true)
491497
.call(updateNodePositions)
492-
//.call(attachPointerEvents, sankey, callbacks.nodeEvents);
498+
.call(attachPointerEvents, sankey, callbacks.nodeEvents);
493499

494500
sankeyNode
495501
//.call(attachDragHandler, sankeyLink, callbacks); // has to be here as it binds sankeyLink

0 commit comments

Comments
 (0)