我们先绘制一个原始的条形图

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view011101"></div>
<script>
    data = [120, 140, 150, 180]  // define width is array

    svg = d3.select("#view011101")
        .append("svg")
        .attr("width", 250)
        .attr("height", 150)
    chart = svg     // select svg
        .selectAll('rect')
        .data(data).enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d,i) {return i * 30})
        .attr('width', function(d) {return d})
        .attr('height', 25)
</script>

原始条形图

更新数据

现在，点击【Click to Update】按钮

我们用随机数据更新条形图。

<script src="https://d3js.org/d3.v6.min.js"></script>
<p id="click">Click to Update</p>
<div id="view011102"></div>
<script>
    data = [120, 140, 150, 180]  // define width is array

    svg = d3.select("#view011102")
        .append("svg")
        .attr("width", 250)
        .attr("height", 150)
    chart = svg     // select svg
        .selectAll('rect')
        .data(data).enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d,i) {return i * 30})
        .attr('width', function(d) {return d})
        .attr('height', 25)  

    d3.select("#click")
        .on("click", function() {  // Event listener - later about that!
            // create random data
            data = [Math.round(Math.random()*120), 
                    Math.round(Math.random()*140), 
                    Math.round(Math.random()*150), 
                    Math.round(Math.random()*180)]         // Custom function, we can write your own!
            // update rect widths with enw data
            svg
                .selectAll("rect")     // select rects to be updated
                .data(data)            // New data binded to rects
                .attr('width', function(d) {return d}) // visual attribute to be updated
        })
</script>

更新数据

同时更新标签

<script src="https://d3js.org/d3.v6.min.js"></script>
<p id="click2">Click to Update</p>
<div id="view011103"></div>
<script>
    data = [120, 140, 150, 180]  // define width is array

    svg = d3.select("#view011103")
        .append("svg")
        .attr("width", 250)
        .attr("height", 150)
    chart = svg     // select svg
        .selectAll('rect')
        .data(data).enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function(d,i) {return i * 30})
        .attr('width', function(d) {return d})
        .attr('height', 25)  

    // After creating basic barchart
    svg.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .text(function(d) {return d})
        .attr("y", function(d,i) {return i*30 + 15})
        .attr("x", function(d) {return d - 20})
        .attr("font-family", "sans-serif")
        .attr("font-size", "10px")
        .attr("fill", "white")        
        
    d3.select("#click2")
        .on("click", function() {  // Event listener - later about that!
            // create random data
            data = [Math.round(Math.random()*120), 
                    Math.round(Math.random()*140), 
                    Math.round(Math.random()*150), 
                    Math.round(Math.random()*180)]         // Custom function, we can write your own!
            // update rect widths with enw data
            svg
                .selectAll("rect")     // select rects to be updated
                .data(data)            // New data binded to rects
                .attr('width', function(d) {return d}) // visual attribute to be updated
            svg
                .selectAll("text")     // select text tags to be updated
                .data(data)           // New data binded to elements
                .attr('x', function(d) {return d-20}) // placed at new positions                    
                .text(function(d) {return d})         // value updated                                 
        })
</script>

同时更新标签

关于代码运行效果

由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。