Limits number of axis ticks for all type of legend; Adds legend name; Adds container style;
MODIFY
examples/legend2d/main.js
examples/legend2d/main.js
@@ -35,49 +35,49 @@ $(function () {
legend.categories([
{
- name: 'ordinal 1',
+ name: 'Discrete Ordinal 1',
type: 'discrete',
scale: 'ordinal',
domain: ['beijing', 'new york', 'london', 'paris'],
colors: ['red', 'green', 'blue', 'orange']
},
{
- name: 'discrete countinous 1',
+ name: 'Discrete countinous 1',
type: 'discrete',
scale: 'linear',
domain: [100, 1000],
- colors: colorbrewer.YlGnBu["9"]
+ colors: colorbrewer.YlGnBu['9']
},
{
- name: 'discrete countinous 2',
+ name: 'Discrete countinous 2',
type: 'discrete',
scale: 'sqrt',
domain: [10000, 1000000],
colors: colorbrewer.PRGn['11']
},
{
- name: 'discrete countinous 3',
+ name: 'Discrete countinous 3',
type: 'discrete',
scale: 'linear',
domain: [0.1, 0.001],
- colors: colorbrewer.RdBu["8"]
+ colors: colorbrewer.RdBu['8']
},
{
- name: 'continuous continuous 1',
+ name: 'Continuous continuous 1',
type: 'continuous',
scale: 'pow',
domain: [100, 10000],
colors: ['red', 'blue']
},
{
- name: 'continuous continuous 2',
+ name: 'Continuous continuous 2',
type: 'continuous',
scale: 'sqrt',
- domain: [100, 10000],
+ domain: [100, 1000],
colors: ['purple', 'orange']
},
{
- name: 'continuous continuous 3',
+ name: 'Continuous continuous 3',
type: 'continuous',
scale: 'log',
domain: [100, 10000],

MODIFY
src/ui/legend2dWidget.js
src/ui/legend2dWidget.js
@@ -18,7 +18,25 @@ var legend2dWidget = function (arg) {
this._init = function () {
oldInit();
- m_this.popup = d3.select(m_this.canvas()).append('div')
+ var canvas = m_this.canvas();
+ d3.select(canvas)
+ .style({
+ 'padding': '10px',
+ 'border': '1.5px solid black',
+ 'border-radius': '3px',
+ 'transition': '250ms background linear',
+ 'background-color': 'rgba(255, 255, 255, 0.75)'
+ })
+ .on('mouseover', function () {
+ d3.select(this)
+ .style('background-color', 'rgba(255, 255, 255, 1)');
+ })
+ .on('mouseout', function () {
+ d3.select(this)
+ .style('background-color', 'rgba(255, 255, 255, 0.75)');
+ });
+
+ m_this.popup = d3.select(canvas).append('div')
.style({
'position': 'absolute',
'background': 'white',
@@ -36,17 +54,30 @@ var legend2dWidget = function (arg) {
this.draw = function () {
var container = d3.select(m_this.canvas()).append('div');
- var width = 700;
- var margin = 15;
+ var width = 300;
+ var margin = 20;
m_categories.forEach(function (category, index) {
- var legendSvg = container
+ var legendContainer = container
.append('div')
+ .style({
+ 'margin-bottom': '10px'
+ });
+
+ legendContainer
+ .append('div')
+ .text(category.name)
+ .style({
+ 'text-align': 'center'
+ })
+
+ var legendSvg = legendContainer
.append('svg')
.attr({
+ 'display': 'block',
'width': width,
- 'height': '50px',
- 'viewBox': -margin + ' 0 ' + width + ' 50'
+ 'height': '40px',
+ 'viewBox': -margin + ' 0 ' + width + ' 40'
})
if (category.type === 'discrete') {
@@ -98,7 +129,11 @@ var legend2dWidget = function (arg) {
.rangePoints([0, width]);
var axis = d3.svg.axis()
.scale(axisScale)
- .tickFormat(d3.format('.2s'));
+ .tickFormat(d3.format('.2s'))
+ .tickValues(function () {
+ var skip = Math.ceil(axisScale.domain().length / 6);
+ return axisScale.domain().filter(function (d, i) { return i % skip === 0; });
+ });
m_this._renderAxis(svg, axis);
}
}

Limits number of axis ticks for all type of legend; Adds legend name; Adds container style;