30:[] 2e:{"title":"Pie","cells":[{"id":0,"value":"md`# Pie`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"data = [\n { item: \"商品A\", amount: 40 }, \n { item: \"商品B\", amount: 30 }, \n { item: \"商品C\", amount: 25 }, \n { item: \"商品D\", amount: 15 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"{\nlet sum = d3.sum(data, d => d.amount);\nlet perc = amount => amount/sum;\nlet percLabel = perc => (perc * 100).toFixed(2) + '%';\nlet radioLable = radio => radio.toFixed(2) + '°';\nconst ANGLE = 360;\nreturn html`\n\n \n ${ data.map(row => `\n \n \n \n \n `) }\n

商品	数量	占比	角度
${row.item}	${row.amount}	${row.amount} / ${sum} = ${percLabel(perc(row.amount))}	${percLabel(perc(row.amount))} × ${ANGLE}° = ${radioLable(perc(row.amount)*360)}

`}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"pie = d3.pie().value(d => d.amount);","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"// color = d3.scaleOrdinal()\n// .domain(data.map(d => d.item))\n// .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())\ncolor = [ \"#343e73\", \"#22a6a1\", \"#ffda8a\", \"#ff9c4d\" ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"arc = d3.arc().innerRadius(0).outerRadius(Math.min(width, height)/2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"chart = {\n const arcs = pie(data);\n // console.log(arcs);\n const svg = d3.select(DOM.svg(width, height))\n .attr(\"text-anchor\", \"middle\")\n .style(\"font\", \"12px sans-serif\");\n\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(${width / 2},${height / 2})`);\n \n g.selectAll(\"path\")\n .data(arcs)\n .enter().append(\"path\")\n .attr(\"fill\", (d,i) => color[i])\n .attr(\"stroke\", \"white\")\n .attr(\"d\", arc)\n\n// const text = g.selectAll(\"text\")\n// .data(arcs)\n// .enter().append(\"text\")\n// .attr(\"transform\", d => `translate(${arcLabel.centroid(d)})`)\n// .attr(\"dy\", \"0.35em\");\n \n// text.append(\"tspan\")\n// .attr(\"x\", 0)\n// .attr(\"y\", \"-0.7em\")\n// .style(\"font-weight\", \"bold\")\n// .text(d => d.data.item);\n \n // text.filter(d => (d.endAngle - d.startAngle) > 0.25).append(\"tspan\")\n // .attr(\"x\", 0)\n // .attr(\"y\", \"0.7em\")\n // .attr(\"fill-opacity\", 0.7)\n // .text(d => d.data.amount.toLocaleString());\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}