md`# study-d3-shape`
md`## Append`
md`### Symbols`
{
//原始方法呈现Symbols
let symbolSize=1000;
return svg`
<svg width="${width}" height="80" style="display: none;">
<g transform="translate(0,0)">
<path transform="translate(50,50)" d="${d3.symbol(d3.symbolCircle,symbolSize)()}" stroke="green" fill="red" />
<path transform="translate(100,50)" d="${d3.symbol(d3.symbolCross,symbolSize)()}" stroke="none" fill="red" />
<path transform="translate(150,50)" d="${d3.symbol(d3.symbolDiamond,symbolSize)()}" stroke="none" fill="red" />
<path transform="translate(200,50)" d="${d3.symbol(d3.symbolSquare,symbolSize)()}" stroke="none" fill="red" />
<path transform="translate(250,50)" d="${d3.symbol(d3.symbolStar,symbolSize)()}" stroke="none" fill="red" />
<path transform="translate(300,50)" d="${d3.symbol(d3.symbolTriangle,symbolSize)()}" stroke="none" fill="red" />
<path transform="translate(350,50)" d="${d3.symbol(d3.symbolWye,symbolSize)()}" stroke="none" fill="red" />
</g>
</svg>`
}
{
//for呈现Symbols
let symbolSize=1000;
return svg`
<svg width=${width} height=80>
<g transform="translate(0,0)">
${d3.symbols.map((symbol,i)=>{
return svg`<path transform="translate(${50+i*50},50)" d="${d3.symbol(symbol,symbolSize)()}" stroke="none" fill="red" />`
})}
</g>
</svg>`
}
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
