diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js index 02e4a55ea46..c3622cb2649 100644 --- a/src/traces/parcoords/parcoords.js +++ b/src/traces/parcoords/parcoords.js @@ -9,6 +9,7 @@ 'use strict'; var d3 = require('d3'); +var rgba = require('color-rgba'); var Lib = require('../../lib'); var Drawing = require('../../components/drawing'); @@ -102,7 +103,10 @@ function ordinalScale(dimension) { function unitToColorScale(cscale) { var colorStops = cscale.map(function(d) { return d[0]; }); - var colorTuples = cscale.map(function(d) { return d3.rgb(d[1]); }); + var colorTuples = cscale.map(function(d) { + var RGBA = rgba(d[1]); + return d3.rgb('rgb(' + RGBA[0] + ',' + RGBA[1] + ',' + RGBA[2] + ')'); + }); var prop = function(n) { return function(o) { return o[n]; }; }; // We can't use d3 color interpolation as we may have non-uniform color palette raster diff --git a/test/image/baselines/gl2d_parcoords_rgba_colorscale.png b/test/image/baselines/gl2d_parcoords_rgba_colorscale.png new file mode 100644 index 00000000000..8f48a143593 Binary files /dev/null and b/test/image/baselines/gl2d_parcoords_rgba_colorscale.png differ diff --git a/test/image/mocks/gl2d_parcoords_rgba_colorscale.json b/test/image/mocks/gl2d_parcoords_rgba_colorscale.json new file mode 100644 index 00000000000..758943ab768 --- /dev/null +++ b/test/image/mocks/gl2d_parcoords_rgba_colorscale.json @@ -0,0 +1,47 @@ +{ + "data": [ + { + "dimensions": [ + { + "values": [ + 0, + 1 + ] + }, + { + "values": [ + 1, + 0 + ] + } + ], + "line": { + "cmax": 1, + "cmin": 0, + "color": [ + 0, + 1 + ], + "colorscale": [ + [ + 0, + "rgba(255,0,0,1)" + ], + [ + 1, + "rgba(0,0,255,1)" + ] + ], + "showscale": true + }, + "type": "parcoords" + } + ], + "layout": { + "width": 400, + "height": 400, + "title": { + "text": "should work with rgba colorscale" + } + } +}