我们先绘制一个原始的条形图
<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，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。
