数据可视化【十二】颜色图例和尺寸图例

有了前面的知识，制作一个图例应该不是很难，关键是我们想要制作一个可以在其他地方进行使用的图例，这样就需要能够动态地设置图例的大小，位置，等等。

这里直接上代码：

colorLegend.js

export const colorLegend = (selection, props) => {const {colorScale, height, circleRadius, spacing,textOffset} = props;const groups = selection.selectAll('g').data(colorScale.domain());const groupEnter = groups.enter().append('g').attr('class', 'tick').attr('transform', (d,i) => `translate(0, ${i*spacing+circleRadius})`);;groups.exit().remove();groupEnter.append('circle').attr('r', 0).merge(groups.select('circle'))	//both enter section and update section.attr('fill', colorScale).transition().duration(1000).attr('r', circleRadius);const text = groups.select('text');groupEnter.append('text').attr('x', textOffset).attr('dy', '0.32em').merge(text)	//both enter section and update section.text(d => d)}

sizeLegend.js

export const sizeLegend = (selection, props) => {const {sizeScale, height, spacing,textOffset, numTicks, circleFill} = props;const ticks = sizeScale.ticks(numTicks).filter(d => d !== 0);const groups = selection.selectAll('g').data(ticks);const groupEnter = groups.enter().append('g').attr('class', 'tick').attr('transform', (d,i) => `translate(0, ${i*spacing})`);;groups.exit().remove();groupEnter.append('circle').attr('r', 0).merge(groups.select('circle'))	//both enter section and update section.attr('fill', circleFill).transition().duration(1000).attr('r', d => sizeScale(d) - 10);const text = groups.select('text');groupEnter.append('text').attr('x', d => sizeScale(d) + textOffset).attr('dy', '0.32em').merge(text)	//both enter section and update section.text(d => d)}

上面的代码就可以直接在其他地方使用，例如：
index.js

import { colorLegend } from './colorLegend.js';
import { sizeLegend } from './sizeLegend.js';const svg = d3.select('svg');
// svg.style('background-color', 'red'); testconst height = +svg.attr('height');const colorScale = d3.scaleOrdinal().domain(['apple', 'lemon', 'orange', 'lime']).range(['red', 'yellow', 'orange', 'green']);svg.append('g').attr('transform', `translate(100 ,100)`).call(colorLegend, {colorScale,circleRadius: 30,spacing : 80,textOffset : 100
});const sizeScale = d3.scaleSqrt().domain([0, 10]).range([0, 50]);svg.append('g').attr('transform', `translate(800 ,50)`).call(sizeLegend, {sizeScale,spacing : 100,textOffset : 40,numTicks: 5,circleFill: 'rgba(0, 0, 0, 0.5)'
});// console.log(fruits);