drawSymbol: function() {
let svg = this.d3l(),
symbol = SymbolMaker.symbol({name: this.get('shape')});
symbol.call(svg);
let bindAttr = (_) => {
_.attr({
"xlink:xlink:href": symbol.url(),
x: 0,
width: "100%",
height: "100%"
}).style({
fill: this.get('color')
});
};
let sel = this.d3l().select("g.swatchs")
.selectAll("use.swatch")
.data([this.get('shape')])
.call(bindAttr);
sel.enter()
.append("use")
.classed("swatch", true)
.call(bindAttr);
sel.exit().remove();
}.observes('shape', 'color')
let appendSymbolIntervalLinearLabel = function(val, i) {
let r = {x: d.get('mapping').getScaleOf('size')(val - 0.000000001), y: d.get('mapping').getScaleOf('size')(val - 0.000000001)},
symbol = SymbolMaker.symbol({name: d.get('mapping.visualization.shape')});
if (!(r.x > 0 && r.y > 0)) return;
symbol.call(svg);
let g = d3.select(this).append("g");
g.append("use")
.attr({
"xlink:href": symbol.url(),
"width": r.x*2,
"height": r.y*2,
"transform": d3lper.translate({tx: -r.x, ty: 0}),
"stroke-width": symbol.scale(d.get('mapping.visualization.stroke'), r.x*2),
"stroke": d.get('mapping.visualization.strokeColor'),
"fill": d.get('mapping').getScaleOf('color')(val - 0.000000001)
});
g = d3.select(this).append("g");
g.append("line").attr({
x1: -r.x,
y1: r.y,
x2: textOffset - 6 - r.x,
y2: r.y,
stroke: "black"
});
g.append("text")
.text( v => formatter(v) )
.attr({
x: textOffset - r.x,
y: r.y,
dy: "0.3em",
"font-size": "0.75em"
})
};
let appendRuleLabel = function(rule, i) {
let r;
if (d.get('mapping.visualization.type') === "symbol") {
let shape = rule.get('shape') ? rule.get('shape') : d.get('mapping.visualization.shape');
r = {x: rule.get('size'), y: rule.get('size')};
let symbol = SymbolMaker.symbol({name: shape});
symbol.call(svg);
let g = d3.select(this).append("g");
g.append("use")
.attr({
"xlink:href": symbol.url(),
"width": r.x*2,
"height": r.y*2,
"transform": d3lper.translate({tx: -r.x, ty: 0}),
"stroke-width": symbol.scale(d.get('mapping.visualization.stroke'), r.x*2),
"stroke": rule.get('strokeColor'),
"fill": rule.get('color')
});
} else {
r = {x: 24/2, y: 16/2};
let mask = rule.get('pattern') ? PatternMaker.Composer.build(rule.get('pattern')) : null;
if (mask && mask.fn != PatternMaker.NONE) {
svg.call(mask.fn);
}
let g = d3.select(this).append("g");
g.append("rect")
.attr({
"width": 2*r.x,
"height": 2*r.y,
"transform": d3lper.translate({tx: -r.x, ty: 0}),
"stroke": "#CCCCCC",
"fill": "none"
});
g.append("rect")
.attr({
"width": 2*r.x,
"height": 2*r.y,
"transform": d3lper.translate({tx: -r.x, ty: 0}),
"fill": rule.get('color'),
"mask": mask ? `url(${mask.fn.url()})` : null
});
}
let g = d3.select(this).append("g");
/*g.append("line").attr({
x1: -r.x,
y1: r.y,
x2: textOffset - 6 - r.x,
y2: r.y,
stroke: "black"
});*/
g.append("text")
.text( rule.get('label') )
.attr({
x: textOffset - r.x,
y: r.y,
dy: "0.3em",
"font-size": "0.75em"
})
};