SOURCE

console 命令行工具 X clear

                    
>
console
const dataset = [300, 280, 450, 90, 150]
const padding = 30
const height = 50

var svg = d3.select("body")     
    .append("svg")          
    .attr("width", 500 + 'px')       
    .attr("height",  500 + 'px');    

var g = svg.selectAll(".rect")
    		.data(dataset)
    		.enter()
    		.append("g");

g.append('rect')
.style('x', 0) 
.style('y', (d, i) => {
	return (i+1)* (padding + height) + 'px'
}) 
.style('width', (d, i) => {
	return d+ 'px'
}).style('height', height+ 'px')
.style('fill', 'red');


g.append('text')
.style('x', 0) 
.style('y', (d, i) => {
	return (i+1)* (padding + height) + 'px'
}) 
.attr("dx",d=>{return (d-30)})
.attr("dy",(d, i) => {
    return ((i+1)*(padding+height)+30) + 'px'
})
.attr('fill','white')
.text(d=>d);

        
<html> 
  <head> 
      <meta charset="utf-8"> 
      <script src="https://d3js.org/d3.v5.min.js"></script>
  </head> 
    <body> 
    </body> 
</html>