2f:Td49, { const svg = html`` const svgSelection = d3.select(svg).attr('width', config.width).attr('height', config.height); const bgCircle = d3.arc() .startAngle(config.startAngle * Math.PI / 180) .endAngle(config.endAngle * Math.PI/180) .innerRadius(config.radius - config.bgCircleStroke / 2) .outerRadius(config.radius + config.bgCircleStroke / 2) .cornerRadius(config.bgCircleStroke); svgSelection.append('path').attr('d', bgCircle).style("fill", "#DBE8E4").attr('transform', `translate(100, 100)`); const valueCirleGroup = svgSelection.append('g'); const valueCircle = d3.arc() .startAngle(valueScale(0)) .endAngle(valueScale(realValue)) .innerRadius(config.radius - config.valueCircleStroke / 2) .outerRadius(config.radius + config.valueCircleStroke / 2) .cornerRadius(config.valueCircleStroke); const circleGradient = appendGradient(svg); valueCirleGroup .append('path') .attr('d', valueCircle) .attr('filter', "url(#filterRing)") // 注意这里使用的是后文中的 filter // .style('filter', 'drop-shadow( 3px 3px 2px rgba(0, 0, 0, .2))') .attr('fill', `url(#${circleGradient.attr('id')})`) .attr('stroke', "none") .attr('transform', `translate(100, 100)`) // const centerPoint = d3.arc() // .startAngle(0) // .endAngle(2*Math.PI) // .innerRadius(0) // .outerRadius(config.centerRadius) const centerPoint = svgSelection.append('circle'); centerPoint .attr('id', 'center-point') .attr('cx', config.radius + config.margin) .attr('cy', config.radius + config.margin) .attr('r', config.centerRadius) .attr('filter', "url(#filterCenter)") // 注意这里使用的是后文中的 filter // .style('filter', 'drop-shadow( 3px 3px 2px rgba(0, 0, 0, 0.2))') .attr('fill', '#333'); // const degree = valueScale(realValue) * 180/ Math.PI; // const degree = - 135 mutable pointer = svgSelection .insert('g', "#center-point") .selectAll('path') .data([realValue]) .join("path") .attr('d', pointerString) .attr('fill', '#ff4242') .attr('transform', d => `rotate(${valueScale(d) * 180/ Math.PI}, 100, 100) translate(61, 40)`) const innerRadius = config.radius - config.valueCircleStroke / 2 - 2 const TICK_LEN =4 ; const BIG_TICK_LEN = 10; svgSelection.append('g') .attr('id', 'tick-group') .attr('transform', `translate(100, 100)`) .selectAll() .data(ticks) .join('line') .attr("x1", angle => innerRadius * Math.cos(angle)) .attr("y1", angle => innerRadius * Math.sin(angle)) .attr("x2", angle => (innerRadius - TICK_LEN) * Math.cos(angle)) .attr("y2", angle => (innerRadius - TICK_LEN) * Math.sin(angle)) .attr('stroke', '#00C1B2') .attr('stroke-width', 1) svgSelection.append('g') .attr('id', 'big-tick-group') .attr('transform', `translate(100, 100)`) .selectAll() .data(bigTicks) .join('line') .attr("x1", angle => (innerRadius) * Math.cos(angle)) .attr("y1", angle => (innerRadius) * Math.sin(angle)) .attr("x2", angle => (innerRadius - 10) * Math.cos(angle)) .attr("y2", angle => (innerRadius - 10) * Math.sin(angle)) .attr('stroke-width', 2) .attr('stroke', '#00C1B2') const filterDefsGroup = svgSelection.append('defs') filterDefsGroup.node().appendChild(filterRing) filterDefsGroup.node().appendChild(filterCenter) return svg } 30:T5a6,filterRing = svg` `31:[] 2d:{"title":"仪表盘 Fork 使用 figma 导出代码中的 filter","cells":[{"id":0,"value":"# 仪表盘 Fork 使用 figma 导出代码中的 filter","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"{\n const ard = d3.arc()\n .innerRadius(80)\n .outerRadius(100)\n .startAngle(-Math.PI/2)\n .endAngle(Math.PI / 2);\n \n const svg = d3.create('svg').attr('width', 220).attr('height', 220);\n svg.append('path').attr('d', ard).style('fill', 'green').attr(\"transform\", `translate(100, 100)`);\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"# Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"config = {\n return {\n startAngle: -135,\n endAngle: 135,\n radius: 88,\n bgCircleStroke: 8,\n valueCircleStroke: 16,\n width: 200,\n height: 200,\n margin: 12,\n min: 0,\n max: 200,\n centerRadius: 8\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"function degreeToRadian(angle) {\n return angle * Math.PI / 180;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"valueScale = d3.scaleLinear([config.min, config.max], [degreeToRadian(config.startAngle), degreeToRadian(config.endAngle)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"valueScale(0) * 180 / Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof realValue = Inputs.range([0, 200], {label: \"实时值\", step: 5, value: 80})","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"// {\n// // 可以注释这个 cell 运行动画\n// pointer.data([40])\n// triggerPointerTransition(190, 300)\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"function appendGradient(svg) {\n\n\n const id = 'gradient-test' \n const gradient = d3.select(svg).append('linearGradient'); // this is a selection\n \n gradient.attr('id', id)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr('x1', config.margin)\n .attr('y1', config.height - config.margin)\n // .attr('x2', config.margin + 2 * config.radius)\n .attr('x2', config.width * 1.5)\n .attr('y2', config.margin)\n .selectAll('stop')\n .data([0,1])\n .join('stop')\n .attr('offset', d => d)\n .attr('stop-color', d => d === 0? '#00C1B2' : '#6DFAB7')\n \n\n \n return gradient\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"pointerString = \"M39.0003 77.1836L33.3791 61.7256L39.0004 0.816238L44.6217 61.7256Z\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"d3.ticks(0,1,10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"DOM.uid()","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"{\n const svg = d3.create(\"svg\");\n const rectPath = d3.path()\n rectPath.rect(0,0, 300,150);\n\n\n const id = 'gradient-test' \n const gradient = svg.append('linearGradient'); // this is a selection\n \n const afterAttr = gradient.attr('id', id)\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr('x1', 0)\n .attr('y1', 0)\n .attr('x2', 300)\n .attr('y2', 150)\n .selectAll('stop')\n .data([0,1])\n .join('stop')\n .attr('offset', d => d)\n .attr('stop-color', d => d === 0? '#00C1B2' : '#6DFAB7')\n \n svg.append('path').attr('d', rectPath).attr('fill', `url(#${gradient.attr('id')}`);\n\n \n return svg.node()\n // return afterAttr === gradient\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"// ticks = d3.ticks(config.min, config.max, 60).map(valueScale).map(d => d -Math.PI/2\nticks= getTicks(config.min, config.max, 60).map(valueScale).map(d => d -Math.PI/2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"// bigTicks = d3.ticks(config.min, config.max, 6).map(valueScale).map(d => d -Math.PI/2)\nbigTicks = getTicks(config.min, config.max, 6).map(valueScale).map(d => d -Math.PI/2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"function getTicks(start, end, count) {\n const step = (end- start) / count;\n let arr = []\n for ( let i=0; i<=count; i++) {\n arr.push(start + i * step)\n \n }\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"function createCreateRotateTween(target) {\n const nextAngle = valueScale(target) * 180/ Math.PI\n console.log(target)\n return function createRotateTween(d) {\n console.log('initial data: ', d);\n const currentAngle = valueScale(d) * 180/ Math.PI\n const interpolate = d3.interpolate(currentAngle, nextAngle);\n return function(t) {\n const val = `rotate(${interpolate(t)}, 100, 100) translate(61, 40)`\n console.log(val, \"currenAngle\", currentAngle, \"nextAngle\", nextAngle)\n return val\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"mutable pointer = null;","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"function triggerPointerTransition(target, duration = 700) {\n pointer.transition().duration(duration).ease(d3.easeCubicIn)\n .attrTween('transform', createCreateRotateTween(target))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`## 阴影 Filter 代码`","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"### 中心","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"filterCenter = svg`\n \n \n \n \n \n \n \n \n `\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"### 圆环","pinned":false,"hidden":false,"mode":"md"},{"id":486,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"filterShalow = svg`\n \n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}