我們先繪制一個(gè)原始的條形圖

<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>

原始條形圖

更新數(shù)據(jù)

現(xiàn)在，點(diǎn)擊【Click to Update】按鈕

我們用隨機(jī)數(shù)據(jù)更新條形圖。

<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>

更新數(shù)據(jù)

同時(shí)更新標(biāo)簽

<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>

同時(shí)更新標(biāo)簽

關(guān)于代碼運(yùn)行效果

由于在簡(jiǎn)書上不能展示代碼的運(yùn)行結(jié)果，我在網(wǎng)上搭建了一個(gè) jupyter notebook http://jupyter.cyber-life.cn/lab，我將本套教程的筆記和源代碼寫在了上面，可以在線查看代碼運(yùn)行效果，還可以調(diào)試代碼，有需要的同學(xué)私信我。