如何使用D3.js创建直方图并从JSON读取数据

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

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

<script>
    const svg = d3.select("#chart")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
</script>

<script>
    d3.json("data.json").then(function(data) {
        // 在这里进行数据处理和绘制直方图的操作
    });
</script>

<script>
    d3.json("data.json").then(function(data) {
        // 提取数据
        const values = data.values;
        
        // 创建一个直方图比例尺
        const xScale = d3.scaleLinear()
            .domain([0, d3.max(values)])
            .range([0, width]);
        
        // 创建直方图条形
        svg.selectAll("rect")
            .data(values)
            .enter()
            .append("rect")
            .attr("x", 0)
            .attr("y", function(d, i) {
                return i * (barHeight + barMargin);
            })
            .attr("width", function(d) {
                return xScale(d);
            })
            .attr("height", barHeight)
            .attr("fill", "steelblue");
    });
</script>