d3符号生成器

• 下定决心&＃xff0c;好好过一天~
  

这里我的d3是v7版本&＃xff0c;框架使用的是vue框架。可以只看methods中写的代码即可
源代码

<template><div id&＃61;"SymbolChartsD3" width&＃61;600 height&＃61;600></div>
</template><script>
import * as d3 from "d3"
export default {name:"SymbolChartsD3",mounted(){this.SymbolChartsD3();},methods:{SymbolChartsD3(){var svgWidth &＃61; 600,svgHeight &＃61; 600;var svg &＃61; d3.select("#SymbolChartsD3").append("svg").attr("width",svgWidth).attr("height",svgHeight);var dataAll &＃61; [];var dataAll1 &＃61; [{size:20000,type:d3.symbols[0]}];for(var i &＃61; 0;i < 30;i&＃43;&＃43;){ dataAll.push({size:200,type:d3.symbols[Math.floor(Math.random() * d3.symbols.length)]});}// console.log(d3.symbols[0]);var symbol &＃61; d3.symbol().size(function(d){return d.size;}).type(function(d){return d.type;});var color &＃61; d3.scaleOrdinal(d3.schemeCategory10);function updateCharts(){svg.selectAll().data(dataAll).enter().append("path").attr("d",function(d,i){return symbol(d);}).attr("transform",function(d,i){var x &＃61; 100 &＃43; i%5*20;var y &＃61; 100 &＃43; Math.floor(i/5) * 20;return "translate(" &＃43; x &＃43; "," &＃43; y &＃43; ")";}).attr("fill",function(d,i){return color(i);});}function updateCharts1(){svg.selectAll().data(dataAll1).enter().append("path").attr("d",function(d,i){return symbol(d);}).attr("transform",function(d,i){var x &＃61; 500var y &＃61; 500;return "translate(" &＃43; x &＃43; "," &＃43; y &＃43; ")";}).attr("fill",function(d,i){return color(i);});}updateCharts();// updateCharts1();}}
}
</script><style></style>