用D3js建立台股板塊圖

[
    "9944",
    "新麗",
    "92,813",
    "53",
    "1,950,673",
    "21.05",
    "21.10",
    "20.85",
    "21.10",
    "<p style= color:red>+</p>",
    "0.10",
    "20.75",
    "2",
    "21.15",
    "3",
    "23.19"
  ]

["9960","\u9081\u9054\u5eb7","27.10","+0.35","27.00","27.25","26.85","27.06","56,004","1,515,312","37","27.10","1","27.15","5","33,592,500","27.10","29.80","24.40"]

var Categories = map[string]string{
	"01": "水泥",
	"02": "食品",
	"03": "塑膠",
	"04": "紡織纖維",
	"05": "電機機械",
	"06": "電器電纜",
	"21": "化工",
	"22": "生技",
	"08": "玻璃陶瓷",
	"09": "造紙",
	"10": "鋼鐵",
	"11": "橡膠",
	"12": "汽車",
	"24": "半導體",
	"25": "電腦及週邊",
	"26": "光電",
	"27": "通信網路",
	"28": "電子零組件",
	"29": "電子通路",
	"30": "資訊服務",
	"31": "其他電子",
	"14": "建材營造",
	"15": "航運",
	"16": "觀光",
	"17": "金融保險",
	"18": "貿易百貨",
	"23": "油電燃氣",
	"19": "綜合",
	"20": "其他",
	"32": "文創",
	"33": "農業科技",
	"34": "電商",
	"80": "管理股票",
	"91": "存託憑證",
}

{
    "name": "台股版塊",
    "children": [{
        "name": "集中市場",
        "children": [{
            "name": "水泥",
            "children": [{
                "name": "1101",
                "data": {
                    "Code": "1101",
                    "Name": "台泥",
                    "TradeVolume": "14853294",
                    "Transaction": "6367",
                    "TradeValue": "715327703",
                    "OpeningPrice": "48.35",
                    "HighestPrice": "48.40",
                    "LowestPrice": "47.85",
                    "ClosingPrice": "48.40",
                    "Change": "-0.05",
                    "Time": "2021-09-01T00:00:00+08:00"
                }
            }]
        }]
    }]
}

const Treemap = (props: { width:number, height:number, date:Date }) => {
    const svgRef = useRef(null);
    
    const dataFile = "data/" + props.date.getFullYear() + "-" 
      + (props.date.getMonth() + 1).toString().padStart(2, "0") 
      + "-" + props.date.getDate().toString().padStart(2, "0") + ".json";

    const renderTreemap = async () => {
        const svg = d3.select(svgRef.current).style("font", "10px sans-serif");
        svg.attr('width', props.width).attr('height', props.height);
        svg.selectAll("*").remove();
        
        var stockData:StockData

        try {
            stockData = await d3.json(dataFile) as StockData;
        } catch(e) {
            svg.append("text")
                .text("本日無資料, 請按左上角按鈕選取時間")
                .attr("x", 6)
                .attr("y", 22)
                .attr("stroke", "white");
            return;
        }
    };

    useEffect(() => {
        renderTreemap();
    });
    
    return (
        <Box>
            <svg ref={svgRef} />
        </Box>
      );
}

export default Treemap

svg.selectAll("rect")
    .data(root.leaves())
    .enter()
    .append("rect")
    .attr('x', d => { return (d as HierarchyRectangularNode<StockData>).x0; })
    .attr('y', d => { return (d as HierarchyRectangularNode<StockData>).y0; })
    .attr('width', d => { return (d as HierarchyRectangularNode<StockData>).x1 - (d as HierarchyRectangularNode<StockData>).x0; })
    .attr('height', d => { 
            const h = (d as HierarchyRectangularNode<StockData>).y1 - (d as HierarchyRectangularNode<StockData>).y0; 
            return h;
        })
    .style("stroke", "black")
    .style("fill", d => ccolor(d.data))
    .on('mouseover', (event, dataNode)=>{
        mouseOver(event, dataNode);
    }).on('mouseleave', () => {
        tooltip().style("opacity", 0);
    });