From here we will begin to draw a simple diagram of the
Prior to this, it is best to master the basic knowledge of the following svg.
Between a example as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg width="100%" height="300"></svg> </body> <script> var Data = [ 730. , 530. , 330. , 230 , 130. ]; var G = d3.select ( ' SVG ' ) // Get SVG .append ( ' G ' ) // Create packet .attr ( ' Transform ' , ' Translate (30, 30) ' ); // left graph from the viewport, the distances var rectHeight = 30 ; // set the height of the rectangle with a rectangular + co margin 30px g.selectAll ( ' rect ' ) .data (Data) .enter () .append ( ' rect ' ) // use enter create the same number of data rect rectangle .attr ( ' X ' , 0 ) // here a rectangular top left vertex set value x .attr ( ' Y ' , function (D, I) { return rectHeight * I; // set here rectangular vertex Left Y value }) .attr ( ' width ' , function(D, I) { return D; // rectangle width }) .attr ( ' height ' , rectHeight - . 5 ) // actual height of the rectangle 25, this is a lower margin is rectangular. 5 .style ( ' Fill ' , ' Pink ' ); // fill </ Script > </ HTML >
