-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Add title feature to legend and support legend option for various traces #4386
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
9174470
706a883
264044f
a9759a2
b3765b4
ce35947
0a437a6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- choropleth - choroplethmapbox - cone - densitymapbox - heatmap - histogram2d - isosurface - mesh3d - streamtube - surface - volume
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -84,6 +84,7 @@ module.exports = function style(s, gd) { | |
| .enter().append('g') | ||
| .classed('legendpoints', true); | ||
| }) | ||
| .each(styleSpatial) | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [Do not address this comment in this PR - I'm just writing down ideas for future development] I think |
||
| .each(styleWaterfalls) | ||
| .each(styleFunnels) | ||
| .each(styleBars) | ||
|
|
@@ -481,6 +482,124 @@ module.exports = function style(s, gd) { | |
| stylePie(pts, d0Mod, tMod); | ||
| } | ||
| } | ||
|
|
||
| function styleSpatial(d) { // i.e. maninly traces having z and colorscale | ||
| var trace = d[0].trace; | ||
|
|
||
| var useGradient; | ||
| var ptsData = []; | ||
| if(trace.visible) { | ||
| switch(trace.type) { | ||
| case 'histogram2d' : | ||
| case 'heatmap' : | ||
| ptsData = [ | ||
| ['M-15,-2V4H15V-2Z'] // similar to contour | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| ]; | ||
| useGradient = true; | ||
| break; | ||
| case 'choropleth' : | ||
| case 'choroplethmapbox' : | ||
| case 'densitymapbox' : | ||
| ptsData = [ | ||
| ['M-6,-6V6H6V-6Z'] | ||
| ]; | ||
| useGradient = true; | ||
| break; | ||
| case 'cone' : | ||
| ptsData = [ | ||
| ['M-6,2 A2,2 0 0,0 -6,6 V6L6,4Z'], | ||
| ['M-6,-6 A2,2 0 0,0 -6,-2 L6,-4Z'], | ||
| ['M-6,-2 A2,2 0 0,0 -6,2 L6,0Z'] | ||
| ]; | ||
| useGradient = false; | ||
| break; | ||
| case 'streamtube' : | ||
| ptsData = [ | ||
| ['M-6,2 A2,2 0 0,0 -6,6 H6 A2,2 0 0,1 6,2 Z'], | ||
| ['M-6,-6 A2,2 0 0,0 -6,-2 H6 A2,2 0 0,1 6,-6 Z'], | ||
| ['M-6,-2 A2,2 0 0,0 -6,2 H6 A2,2 0 0,1 6,-2 Z'] | ||
| ]; | ||
| useGradient = false; | ||
| break; | ||
| case 'surface' : | ||
| ptsData = [ | ||
| ['M-6,-6 A2,3 0 0,0 -6,0 H6 A2,3 0 0,1 6,-6 Z'], | ||
| ['M-6,1 A2,3 0 0,1 -6,6 H6 A2,3 0 0,0 6,0 Z'] | ||
| ]; | ||
| useGradient = true; | ||
| break; | ||
| case 'mesh3d' : | ||
| ptsData = [ | ||
| ['M-6,6H0L-6,-6Z'], | ||
| ['M6,6H0L6,-6Z'], | ||
| ['M-6,-6H6L0,6Z'] | ||
| ]; | ||
| useGradient = false; | ||
| break; | ||
| case 'volume' : | ||
| ptsData = [ | ||
| ['M-6,6H0L-6,-6Z'], | ||
| ['M6,6H0L6,-6Z'], | ||
| ['M-6,-6H6L0,6Z'] | ||
| ]; | ||
| useGradient = true; | ||
| break; | ||
| case 'isosurface': | ||
| ptsData = [ | ||
| ['M-6,6H0L-6,-6Z'], | ||
| ['M6,6H0L6,-6Z'], | ||
| ['M-6,-6 A12,24 0 0,0 6,-6 L0,6Z'] | ||
| ]; | ||
| useGradient = false; | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| var pts = d3.select(this).select('g.legendpoints') | ||
| .selectAll('path.legend3dandfriends') | ||
| .data(ptsData); | ||
| pts.enter().append('path').classed('legend3dandfriends', true) | ||
| .attr('transform', 'translate(20,0)') | ||
| .style('stroke-miterlimit', 1); | ||
| pts.exit().remove(); | ||
|
|
||
| pts.each(function(dd, i) { | ||
| var pt = d3.select(this); | ||
|
|
||
| var cOpts = extractOpts(trace); | ||
| var colorscale = cOpts.colorscale; | ||
| var reversescale = cOpts.reversescale; | ||
| var fillGradient = function(s) { | ||
| if(s.size()) { | ||
| var gradientID = 'legendfill-' + trace.uid; | ||
| Drawing.gradient(s, gd, gradientID, | ||
| reversescale ? 'horizontal' : 'horizontalreversed', | ||
etpinard marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| colorscale, 'fill'); | ||
| } | ||
| }; | ||
|
|
||
| var fillColor; | ||
| if(!colorscale) { | ||
| var color = trace.vertexcolor || trace.facecolor || trace.color; | ||
| fillColor = Lib.isArrayOrTypedArray(color) ? (color[i] || color[0]) : color; | ||
| } else { | ||
| if(!useGradient) { | ||
| var len = colorscale.length; | ||
| fillColor = | ||
| i === 0 ? colorscale[reversescale ? len - 1 : 0][1] : // minimum | ||
| i === 1 ? colorscale[reversescale ? 0 : len - 1][1] : // maximum | ||
| colorscale[Math.floor((len - 1) / 2)][1]; // middle | ||
| } | ||
| } | ||
|
|
||
| pt.attr('d', dd[0]); | ||
| if(fillColor) { | ||
| pt.call(Color.fill, fillColor); | ||
| } else { | ||
| pt.call(fillGradient); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| function getGradientDirection(reversescale) { | ||
|
|
||

There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain why we need this extra piece of logic:
here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question.
This is to keep the baselines to what was in place before.
Otherwise if there are e.g. one
scatter3dwith other gl3d traces (that now support legend) thelegendwould show up on the graph forscatter3d.