使用D3.js绘制顺化曲线图面积图表

淡淡的烟草味﹌ 2022-04-18 02:29 257阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" type="text/css"/>
    </head>
    <body>
    	<div id="container"></div>
    	
    	<script src="http://d3js.org/d3.v3.js" type="text/javascript"></script>
    	<script src="js/index.js" type="text/javascript"></script>
    </body>
    </html>

index.js

// 定义svg的宽度和高度
    var width = 500,
    height = 250,
    margin = {left:50,top:30,right:20,bottom:20},
    // 图表的宽度=svg的宽度减去margin
    g_width = width - margin.left-margin.right,
    g_height = height - margin.top - margin.bottom;
    
    // svg
    var svg = d3.select("#container")
    .append("svg")
    // 添加宽度和高度属性 width,height
    .attr("width",width) //attribute
    .attr("height",height)
    
    var g = d3.select("svg").append("g")
    // 设置x,y轴偏移量
    .attr("transform","translate(" +margin.left+","+ margin.top +")")
    
    var data = [1,3,5,7,8,4,3,7]
    
    // 设置缩放
    var scale_x = d3.scale.linear().domain([0,data.length-1]).range([0,g_width])
    var scale_y = d3.scale.linear().domain([0,d3.max(data)]).range([g_height,0])
    
    var area_generator = d3.svg.area()
    // d表示传进来的数据 i表示数据的下标
    .x(function(d,i){return scale_x(i);}) // 0,1,2,3
    .y0(g_height) // 1,3,5
    .y1(function(d){return scale_y(d);}) 
    // 去除线的棱角 使其顺滑
    .interpolate("cardinal")
    
    g
    .append("path")
    // d 是 path data的缩写 将data数据传人
    .attr("d",area_generator(data)) // d = "M1,0L20,40L40,50L100,100L0,200"
    // 填充颜色
    .style("fill","steelblue")
    
    
    // 生成坐标轴
    var x_axis = d3.svg.axis().scale(scale_x),
    // y轴在左侧
    y_axis = d3.svg.axis().scale(scale_y).orient("left");
    
    g.append("g")
    .call(x_axis)
    .attr("transform","translate(0,"+ g_height +")")
    
    g.append("g")
    .call(y_axis)
    //添加坐标轴叙述
    .append("text")
    .text("Price($)")
    .attr("transform","rotate(-90)")
    .attr("text-anchor","end")
    .attr("dy","1em")

style.css

#container {
    	background: #ddd;
    	width: 500px;
    	height: 250px;
    }
    
    path {
    	fill:none;
    	stroke: #4682B4;
    	stroke-width:2;
    }
    /* 设置坐标样式 */
    .domain,tick line {
    	stroke:gray;
    	stroke: width;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220418/e152e4f0190a4c9483a6db6600187ccc.png