Add multi color support to continuous color legend
MODIFY
examples/color-legend/main.js
examples/color-legend/main.js
@@ -92,6 +92,13 @@ $(function () {
base: Math.E,
domain: [100, 10000],
colors: ['blue', 'olive']
+ },
+ {
+ name: 'Continuous multicolor',
+ type: 'continuous',
+ scale: 'linear',
+ domain: [100, 1000],
+ colors: ['red', 'blue', 'green', 'orange']
}
]);

MODIFY
src/ui/colorLegendWidget.js
src/ui/colorLegendWidget.js
@@ -327,9 +327,14 @@ var colorLegendWidget = function (arg) {
gradient.append('stop')
.attr('offset', '0%')
.attr('stop-color', category.colors[0]);
+ for (var i = 1; i < category.colors.length - 1; i++) {
+ gradient.append('stop')
+ .attr('offset', (100 / (category.colors.length - 1) * i).toFixed(6) + '%')
+ .attr('stop-color', category.colors[i]);
+ }
gradient.append('stop')
.attr('offset', '100%')
- .attr('stop-color', category.colors[1]);
+ .attr('stop-color', category.colors[category.colors.length - 1]);
svg.append('rect')
.attr('fill', 'url(#gradient' + id + ')')
.attr('width', width)

MODIFY
tests/cases/colorLegend.js
tests/cases/colorLegend.js
@@ -67,6 +67,13 @@ describe('color legend', function () {
base: Math.E,
domain: [100, 10000],
colors: ['blue', 'olive']
+ },
+ {
+ name: 'Continuous multicolor',
+ type: 'continuous',
+ scale: 'pow',
+ domain: [100, 1000],
+ colors: ['red', 'blue', 'green', 'orange']
}
];
@@ -164,6 +171,10 @@ describe('color legend', function () {
expect($(legends[7]).find('svg g.tick text').toArray().map(function (text) {
return $(text).text();
}).join(', ')).toBe('150, 400, 1.1k, 3.0k, 8.1k');
+
+ expect($(legends[8]).find('svg>defs stop').length).toBe(4);
+ expect($(legends[8]).find('svg>defs stop:nth-child(2)').attr('offset')).toBe('33.333333%');
+ expect($(legends[8]).find('svg>defs stop:nth-child(3)').attr('offset')).toBe('66.666667%');
});
it('test mouse events', function () {

Add multi color support to continuous color legend