console 命令行工具 X clear

console

//画布大小
var width = 400;
var height = 400;
//在 body 里添加一个 SVG 画布  
var svg = d3.select("body")
    .append('svg')
    .attr("width", width)
    .attr('height', height);

//画布周边的空白
 var padding = {left:30, right:30, top:20, bottom:20};

var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

// x轴比例尺
var xScale = d3.scaleBand()
    .domain(d3.range(dataset.length))
    .range([0, width - padding.left - padding.right])

// y轴比例尺
var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0])

console.log(xScale.bandwidth())
// 定义X轴
var xAxis = d3.axisBottom(xScale)
// 定义y轴
var yAxis = d3.axisLeft(yScale).ticks(10)

// 矩形之间的空白
var rectPadding = 4;

//添加矩形元素
// var rects = svg.selectAll('.MyRect')
//     .data(dataset)
//     .enter()
//     .append('rect')
//     .attr('class', 'MyRect')
//     .attr("transform","translate(" + padding.left + "," + padding.top + ")")
//     .attr("x", function(d,i){
//         return xScale(i) + rectPadding/2;
//     } )
//     .attr('fill', 'steelblue')
//     .attr("y",function(d){
//         return yScale(d);
//     })
//     .attr("width", 20 )
//     .attr("height", function(d){
//         return height - padding.top - padding.bottom - yScale(d);
//     });

//添加文字元素
var texts = svg.selectAll(".MyText")
    .data(dataset)
    .enter()
    .append("text")
    .attr("class","MyText")
    .attr("transform","translate(" + padding.left + "," + padding.top + ")")
    .attr("x", function(d,i){
        return xScale(i) + rectPadding/2;
    } )
    .attr("y",function(d){
        return yScale(d);
    })
    .attr('fill', 'steelblue')
    .attr("dx",function(){
        return (xScale.range() - rectPadding)/2;
    })
    .attr("dy",function(d){
        return 20;
    })
    .text(function(d){
        return d;
    });

    //添加x轴
svg.append("g")
  .attr("class","x axis")
  .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis); 

//添加y轴
svg.append("g")
  .attr("class","y axis")
  .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);



var data = [
  {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
  {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
  {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
  {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
];
var stack = d3.stack()
    .keys(["apples", "bananas", "cherries", "dates"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var series = stack(data);
console.log(series)

<html> 
  <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
  </head> 
    <body> 
        <p>Hello World 1</p>
        <p>Hello World 2</p>
        <script src="https://d3js.org/d3.v5.js"></script>
        <script>  
        d3.select("body").selectAll("p").text("www.ourd3js.com");      
        </script> 
    </body> 
</html>