Skip to content

Commit 1cbc2f2

Browse files
monferamonfera
committed
attribute work:
- putting nodepad, nodewidth under node - adding line color and thickness
1 parent 747eb23 commit 1cbc2f2

File tree

6 files changed

+82
-40
lines changed

6 files changed

+82
-40
lines changed

‎src/traces/sankey/attributes.js‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
var shapeAttrs = require('../../components/shapes/attributes');
1212
var fontAttrs = require('../../plots/font_attributes');
1313
var plotAttrs = require('../../plots/attributes');
14+
var colorAttrs = require('../../components/color/attributes');
1415

1516
var extendFlat = require('../../lib/extend').extendFlat;
1617

@@ -55,22 +56,6 @@ module.exports = {
5556
description: 'Sets the orientation of the Sankey diagram.'
5657
},
5758

58-
nodepad: {
59-
valType: 'number',
60-
min: 0,
61-
dflt: 20,
62-
role: 'style',
63-
description: 'Sets the padding (in px) between the `nodes`.'
64-
},
65-
66-
nodethickness: {
67-
valType: 'number',
68-
min: 1,
69-
dflt: 20,
70-
role: 'style',
71-
description: 'Sets the thickness (in px) of the `nodes`.'
72-
},
73-
7459
valueformat: {
7560
valType: 'string',
7661
dflt: '.3s',
@@ -119,6 +104,43 @@ module.exports = {
119104
arrayOk: true,
120105
dflt: 'rgb(0,255,0,0.5)'
121106
}),
107+
line: {
108+
color: {
109+
valType: 'color',
110+
role: 'style',
111+
dflt: colorAttrs.defaultLine,
112+
arrayOk: true,
113+
description: [
114+
'Sets the color of the line enclosing each sector.'
115+
].join(' ')
116+
},
117+
width: {
118+
valType: 'number',
119+
role: 'style',
120+
min: 0,
121+
dflt: 0.5,
122+
arrayOk: true,
123+
description: [
124+
'Sets the width (in px) of the line enclosing each sector.'
125+
].join(' ')
126+
}
127+
},
128+
pad: {
129+
valType: 'number',
130+
arrayOk: false,
131+
min: 0,
132+
dflt: 20,
133+
role: 'style',
134+
description: 'Sets the padding (in px) between the `nodes`.'
135+
},
136+
thickness: {
137+
valType: 'number',
138+
arrayOk: false,
139+
min: 1,
140+
dflt: 20,
141+
role: 'style',
142+
description: 'Sets the thickness (in px) of the `nodes`.'
143+
},
122144
description: 'The nodes of the Sankey plot.'
123145
},
124146

‎src/traces/sankey/defaults.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
4242
}
4343

4444
coerce('node.label');
45+
coerce('node.pad');
46+
coerce('node.thickness');
47+
coerce('node.line.color');
48+
coerce('node.line.width');
4549

4650
var defaultNodePalette = function(i) {return colors[i % colors.length];};
4751

@@ -65,8 +69,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
6569
coerce('domain.x');
6670
coerce('domain.y');
6771
coerce('orientation');
68-
coerce('nodepad');
69-
coerce('nodethickness');
7072
coerce('valueformat');
7173
coerce('valuesuffix');
7274
coerce('arrangement');

‎src/traces/sankey/plot.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,6 @@ function relatedNodes(l) {
4848

4949
function nodeHoveredStyle(sankeyNode, d, sankey) {
5050

51-
sankeyNode.select('.nodeRect').style('stroke-width', 1);
52-
5351
if(d && sankey) {
5452
ownTrace(sankey, d)
5553
.selectAll('.sankeyLink')
@@ -60,8 +58,6 @@ function nodeHoveredStyle(sankeyNode, d, sankey) {
6058

6159
function nodeNonHoveredStyle(sankeyNode, d, sankey) {
6260

63-
sankeyNode.select('.nodeRect').style('stroke-width', 0.5);
64-
6561
if(d && sankey) {
6662
ownTrace(sankey, d)
6763
.selectAll('.sankeyLink')

‎src/traces/sankey/render.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,10 @@ function sankeyModel(layout, d, i) {
7272
linkSpec = trace.link,
7373
arrangement = trace.arrangement,
7474
horizontal = trace.orientation === 'h',
75-
nodePad = trace.nodepad,
76-
nodeThickness = trace.nodethickness,
75+
nodePad = trace.node.pad,
76+
nodeThickness = trace.node.thickness,
77+
nodelineColor = trace.node.line.color,
78+
nodelineWidth = trace.node.line.width,
7779
valueFormat = trace.valueformat,
7880
valueSuffix = trace.valuesuffix,
7981
textFont = trace.textfont;
@@ -124,6 +126,8 @@ function sankeyModel(layout, d, i) {
124126
width: width,
125127
height: height,
126128
nodePad: nodePad,
129+
nodelineColor: nodelineColor,
130+
nodelineWidth: nodelineWidth,
127131
valueFormat: valueFormat,
128132
valueSuffix: valueSuffix,
129133
textFont: textFont,
@@ -184,6 +188,8 @@ function nodeModel(uniqueKeys, d, n) {
184188
traceId: d.key,
185189
node: n,
186190
nodePad: d.nodePad,
191+
nodelineColor: d.nodelineColor,
192+
nodelineWidth: d.nodelineWidth,
187193
textFont: d.textFont,
188194
size: d.horizontal ? d.height : d.width,
189195
visibleWidth: Math.ceil(d.horizontal ? visibleThickness : visibleLength),
@@ -445,17 +451,24 @@ module.exports = function(svg, styledData, layout, callbacks) {
445451
sankeyLink.enter()
446452
.append('path')
447453
.classed('sankeyLink', true)
454+
.attr('d', linkPath)
448455
.call(attachPointerEvents, sankey, callbacks.linkEvents);
449456

450457
sankeyLink
451458
.style('stroke', function(d) {return d.link.dy > 1 ? 'rgba(0,0,0,0)' : d.tinyColorHue;})
452459
.style('stroke-width', function(d) {return d.link.dy > 1 ? 2 : 1;})
453460
.style('stroke-opacity', function(d) {return d.tinyColorAlpha;})
454461
.style('fill', function(d) {return d.tinyColorHue;})
455-
.style('fill-opacity', function(d) {return d.tinyColorAlpha;})
462+
.style('fill-opacity', function(d) {return d.tinyColorAlpha;});
463+
464+
sankeyLink.transition()
465+
.ease(c.ease).duration(c.duration)
456466
.attr('d', linkPath);
457467

458-
sankeyLink.exit().remove();
468+
sankeyLink.exit().transition()
469+
.ease(c.ease).duration(c.duration)
470+
.style('opacity', 0)
471+
.remove();
459472

460473
var sankeyNodeSet = sankey.selectAll('.sankeyNodeSet')
461474
.data(repeat, keyFun);
@@ -508,11 +521,12 @@ module.exports = function(svg, styledData, layout, callbacks) {
508521
nodeRect.enter()
509522
.append('rect')
510523
.classed('nodeRect', true)
511-
.style('stroke-width', 0.5)
512-
.call(Color.stroke, 'rgba(0, 0, 0, 1)')
513524
.call(sizeNode);
514525

515526
nodeRect
527+
.style('stroke-width', function(d) {return d.nodelineWidth;})
528+
.style('stroke', function(d) {return Color.tinyRGB(tinycolor(d.nodelineColor));})
529+
.style('stroke-opacity', function(d) {return Color.opacity(d.nodelineColor);})
516530
.style('fill', function(d) {return d.tinyColorHue;})
517531
.style('fill-opacity', function(d) {return d.tinyColorAlpha;});
518532

‎test/image/mocks/energy.json‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,15 @@
1313
]
1414
},
1515
"orientation": "h",
16-
"nodepad": 15,
17-
"nodethickness": 15,
1816
"valueformat": ".0f",
1917
"valuesuffix": "TWh",
2018
"node": {
19+
"pad": 15,
20+
"thickness": 15,
21+
"line": {
22+
"color": "black",
23+
"width": 0.5
24+
},
2125
"label": [
2226
"Agricultural 'waste'",
2327
"Bio-conversion",
@@ -505,12 +509,12 @@
505509
{
506510
"label": "Thick",
507511
"method": "restyle",
508-
"args": [ "nodethickness", 15 ]
512+
"args": [ "node.thickness", 15 ]
509513
},
510514
{
511515
"label": "Thin",
512516
"method": "restyle",
513-
"args": [ "nodethickness", 8]
517+
"args": [ "node.thickness", 8]
514518
}
515519
]
516520
},
@@ -520,12 +524,12 @@
520524
{
521525
"label": "Small gap",
522526
"method": "restyle",
523-
"args": [ "nodepad", 15 ]
527+
"args": [ "node.pad", 15 ]
524528
},
525529
{
526530
"label": "Large gap",
527531
"method": "restyle",
528-
"args": [ "nodepad", 20]
532+
"args": [ "node.pad", 20]
529533
}
530534
]
531535
},

‎test/image/mocks/energy_dark.json‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,15 @@
1313
]
1414
},
1515
"orientation": "v",
16-
"nodepad": 15,
17-
"nodethickness": 15,
1816
"valueformat": ".0f",
1917
"valuesuffix": "TWh",
2018
"node": {
19+
"pad": 15,
20+
"thickness": 15,
21+
"line": {
22+
"color": "black",
23+
"width": 0.5
24+
},
2125
"label": [
2226
"Agricultural 'waste'",
2327
"Bio-conversion",
@@ -435,12 +439,12 @@
435439
{
436440
"label": "Thick",
437441
"method": "restyle",
438-
"args": [ "nodethickness", 15 ]
442+
"args": [ "node.thickness", 15 ]
439443
},
440444
{
441445
"label": "Thin",
442446
"method": "restyle",
443-
"args": [ "nodethickness", 8]
447+
"args": [ "node.thickness", 8]
444448
}
445449
]
446450
},
@@ -450,12 +454,12 @@
450454
{
451455
"label": "Small gap",
452456
"method": "restyle",
453-
"args": [ "nodepad", 15 ]
457+
"args": [ "node.pad", 15 ]
454458
},
455459
{
456460
"label": "Large gap",
457461
"method": "restyle",
458-
"args": [ "nodepad", 20]
462+
"args": [ "node.pad", 20]
459463
}
460464
]
461465
},

0 commit comments

Comments
 (0)