- 下定决心，好好过一天~
这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可
源代码
<template>
<div id="SymbolChartsD3" width=600 height=600></div>
</template>
<script>
import * as d3 from "d3"
export default {
name:"SymbolChartsD3",
mounted(){
this.SymbolChartsD3();
},
methods:{
SymbolChartsD3(){
var svgWidth = 600,svgHeight = 600;
var svg = d3.select("#SymbolChartsD3")
.append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight);
var dataAll = [];
var dataAll1 = [{
size:20000,type:d3.symbols[0]}];
for(var i = 0;i < 30;i++){
dataAll.push({
size:200,
type:d3.symbols[Math.floor(Math.random() * d3.symbols.length)]
});
}
// console.log(d3.symbols[0]);
var symbol = d3.symbol()
.size(function(d){
return d.size;})
.type(function(d){
return d.type;});
var color = 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 = 100 + i%5*20;
var y = 100 + Math.floor(i/5) * 20;
return "translate(" + x + "," + y + ")";
})
.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 = 500
var y = 500;
return "translate(" + x + "," + y + ")";
})
.attr("fill",function(d,i){
return color(i);
});
}
updateCharts();
// updateCharts1();
}
}
}
</script>
<style>
</style>