|
function circleLegend(selection) { |
|
|
|
var instance = {} |
|
|
|
// set some defaults |
|
var api = { |
|
domain: [0, 100], // the values min and max |
|
range: [0, 120], // the circle area/size mapping圈的大小 |
|
values: [20, 30, 50], // values for circles |
|
width: 500, |
|
height: 500, |
|
suffix:'', // ability to pass in a suffix |
|
circleColor: '#888', |
|
textPadding: 40, |
|
textColor: '#000000' |
|
} |
|
|
|
var sqrtScale = d3.scaleSqrt() |
|
.domain(api.domain) |
|
.range(api.range) |
|
|
|
instance.render = function () { |
|
|
|
var s = selection.append('g') |
|
.attr('class', 'legend-wrap') |
|
// push down to radius of largest circle |
|
.attr('transform', 'translate(0,' + sqrtScale(d3.max(api.values)) + ')') |
|
|
|
// append the values for circles |
|
s.append('g') |
|
.attr('class', 'values-wrap') |
|
.selectAll('circle') |
|
.data(api.values) |
|
.enter().append('circle') |
|
.attr('class', function (d) { return 'values values-' + d; }) |
|
.attr('r', function (d) { return sqrtScale(d); }) |
|
.attr('cx', api.width/2) |
|
.attr('cy', function (d) { return api.height/2 - sqrtScale(d); }) |
|
.style('fill', 'none') |
|
.style('stroke', api.circleColor) |
|
.style('opacity', 0.5) |
|
|
|
// append some lines based on values |
|
s.append('g') |
|
.attr('class', 'values-line-wrap') |
|
.selectAll('.values-labels') |
|
.data(api.values) |
|
.enter().append('line') |
|
.style('stroke', api.textColor) |
|
.style('stroke-dasharray', ('2,2')) |
|
|
|
// append some labels from values |
|
s.append('g') |
|
.attr('class', 'values-labels-wrap') |
|
.selectAll('.values-labels') |
|
.data(api.values) |
|
.enter().append('text') |
|
.attr('x', api.width/2 + sqrtScale(api.domain[1]) + api.textPadding) |
|
.attr('y', function (d) { return (api.height/2 - sqrtScale(d*3.5)) + 5; }) |
|
.attr('shape-rendering', 'crispEdges') |
|
.style('text-anchor', 'end') |
|
.style('fill', api.textColor) |
|
.text(function (d) { return d + api.suffix; }) |
|
|
|
return instance |
|
} |
|
|
|
for (var key in api) { |
|
instance[key] = getSet(key, instance).bind(api) |
|
} |
|
|
|
return instance |
|
|
|
// https://gist.github.com/gneatgeek/5892586 |
|
function getSet(option, component) { |
|
return function (_) { |
|
if (! arguments.length) { |
|
return this[option]; |
|
} |
|
this[option] = _; |
|
return component; |
|
} |
|
} |
|
|
|
} |