将d3.js表添加到现有html

<script src="https://d3js.org/d3.v7.min.js"></script>

<div id="chart"></div>

<script>
    // 获取容器元素
    const chartContainer = d3.select("#chart");

    // 创建数据
    const data = [
        { name: "A", value: 10 },
        { name: "B", value: 20 },
        { name: "C", value: 15 },
        { name: "D", value: 25 },
        { name: "E", value: 30 }
    ];

    // 创建SVG画布
    const svg = chartContainer.append("svg")
        .attr("width", 400)
        .attr("height", 300);

    // 创建矩形元素
    const rects = svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", (d, i) => i * 50)
        .attr("y", (d) => 300 - d.value * 5)
        .attr("width", 40)
        .attr("height", (d) => d.value * 5)
        .attr("fill", "blue");
</script>