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

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

这里直接上代码：

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'); test

const 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);

效果图：

代码地址：https://vizhub.com/Edward-Elric233/bc54edb3b722482590f498f3a1047a62