Difference between revisions of "Team:SJTU-BioX-Shanghai/HP test page"

Line 18: Line 18:
  
  
−
    <body>  
+
<head>
−
        <p>Hello World 1</p>
+
<meta charset="utf-8">
−
        <p>Hello World 2</p>
+
<title>做一个简单的图表</title>
−
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
+
</head>  
−
        <script>
+
<body>
−
        d3.select("body").selectAll("p").text("www.ourd3js.com");    
+
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
−
        </script>  
+
<script>
−
    </body>  
+
 +
var width = 300; //画布的宽度
 +
var height = 300; //画布的高度
 +
 
 +
var svg = d3.select("body") //选择文档中的body元素
 +
.append("svg") //添加一个svg元素
 +
.attr("width", width) //设定宽度
 +
.attr("height", height); //设定高度
 +
 +
var dataset = [ 250 , 210 , 170 , 130 , 90 ];
 +
 +
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
 +
 
 +
svg.selectAll("rect")
 +
  .data(dataset)
 +
  .enter()
 +
  .append("rect")
 +
  .attr("x",20)
 +
  .attr("y",function(d,i){
 +
return i * rectHeight;
 +
  })
 +
  .attr("width",function(d){
 +
  return d;
 +
  })
 +
  .attr("height",rectHeight-2)
 +
  .attr("fill","steelblue");
 +
 
 +
</script>
 +
 +
</body>  
  
  
 
</html>
 
</html>

Revision as of 21:52, 13 August 2018

做一个简单的图表