用dw做网站,优化电池充电什么意思,wordpress 时钟插件,做暧昧在线网站有了前面的知识#xff0c;制作一个图例应该不是很难#xff0c;关键是我们想要制作一个可以在其他地方进行使用的图例#xff0c;这样就需要能够动态地设置图例的大小#xff0c;位置#xff0c;等等。
这里直接上代码#xff1a;
colorLegend.js
export const color…有了前面的知识制作一个图例应该不是很难关键是我们想要制作一个可以在其他地方进行使用的图例这样就需要能够动态地设置图例的大小位置等等。
这里直接上代码
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*spacingcircleRadius}));;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
