有了前面的知識，制作一個圖例應該不是很難，關鍵是我們想要制作一個可以在其他地方進行使用的圖例，這樣就需要能夠動態地設置圖例的大小，位置，等等。

這里直接上代碼：

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

效果圖：

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的数据可视化【十二】 颜色图例和尺寸图例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。