D3+svg 案例

時間 2019-11-30

標籤 d3+svg svg 案例简体版

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="d3.js"></script>
	<title>柱狀圖</title>
	<style type="text/css">
		.axis path,
		.axis line {
		    fill: none;
		    stroke: black;
		    shape-rendering: crispEdges;/*其中的shape-rendering屬性是一個SVG屬性，做用是讓座標軸和刻度線邊緣更整齊*/
		}

		.axis text {
		    font-family: sans-serif;
		    font-size: 11px;
		}
	</style>
    <script type="text/javascript">
   window.onload=function(){

             <!-- ————————————————————————————製做柱狀圖———————————————————————————— -->

	      var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
	        11, 12, 15,20, 18, 17, 16, 18, 23, 25];//數據源
	       var width=500;
	       var height=100;
	       var barPadding =5;  // 柱子間隔
	       var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);
	       var rect=svg.selectAll("rect") .data(dataset).enter().append("rect")
	          .attr("x",function(d,i){return i * (width/dataset.length);}).attr("y",function(d){return height-d*4})
	          .attr("width",width/dataset.length - barPadding).attr("height",function(d){return d*4})
	          .attr("fill", function(d) {return "rgb(0, 0,"+(d * 10)+")"});
	       var text=svg.selectAll("text").data(dataset).enter().append("text").text(function(d){return d})
	       .attr("x", function(d, i) {return i * (width / dataset.length) + (width / dataset.length - barPadding)/2})
	       .attr("y", function(d) {return height - (d * 4) + 14;}).attr("font-family", "sans-serif")
 .attr("font-size", "11px").attr("fill", "white").attr("text-anchor", "middle"); 
	       <!-- ————————————————————————————製做散點圖———————————————————————————— -->

	       var dataArr = [
			                [11, 20], [480, 90], [250, 50], [100, 33], [330, 95],
			                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
			              ];
	       var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
	       var circle=svg.selectAll("circle") .data(dataArr).enter().append("circle");
	           circle.attr("cx", function(d) {return d[0]}).attr("cy", function(d){return d[1]})
	           .attr("r", function(d) { return Math.sqrt(height - d[1])});
	       var text=svg.selectAll("text").data(dataArr).enter().append("text").text(function(d){return d[0]+","+d[1]});   
	           text.attr("x", function(d) {return d[0];}).attr("y", function(d) {return d[1];})
	           .attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");

	    <!-- ————————————————————————————製做尺度———————————————————————————— -->
	     //domain():設置尺度的輸入範圍，參數以數組的形式傳入。
	    //range() :輸出範圍的設置
	    var padding =30;
	    var xScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[0]})]).range([padding, width-padding*2]);
	    var yScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([height-padding,padding]);
	    var rScale = d3.scale.linear().domain([0, d3.max(dataArr, function(d) { return d[1]})]).range([2, 5]);
	     //__________________________散點圖+尺度_________________________________
	    var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
	       var circle=svg.selectAll("circle") .data(dataArr).enter().append("circle");
	           circle.attr("cx", function(d) {return xScale(d[0])}).attr("cy", function(d){return yScale(d[1])})
	           .attr("r", function(d) { return rScale(d[1])});
	       var text=svg.selectAll("text").data(dataArr).enter().append("text").text(function(d){return d[0]+","+d[1]});   
	           text.attr("x", function(d) {return xScale(d[0])}).attr("y", function(d) {return yScale(d[1])})
	           .attr("font-family", "sans-serif").attr("font-size", "11px").attr("fill", "red");
	     <!-- ————————————————————————————製做座標軸 axis()———————————————————————————— -->  
	     var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5); //設置x軸
	     var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);//設置Y軸
	     svg.append("g").attr("class", "axis").attr("transform", "translate(0," + (height - padding) + ")").call(xAxis);  
 svg.append("g") .attr("class", "axis").attr("transform", "translate(" + padding + ",0)").call(yAxis);  
	}     
 </script>
</head>
<body>
	 
</body>
</html>

相關標籤/搜索