文档章节

d3.js折线图

Nirow
 Nirow
发布于 2016/09/02 13:26
字数 684
阅读 643
收藏 0

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 line{stroke-width: .7px;}
.line { fill: none; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round;}
.negative{stroke:#1f77b4; } /* 负舆情 */
.square{fill: #1f77b4;}     /* 正方形 -红色*/
.positive{stroke: #d62728; }/* 正舆情 */
.diamond{fill: #d62728;}    /* 菱形-蓝色 */
</style>
<svg width="1000" height="400"></svg>
<script src="d3.v4.min.js"></script>

<script>

//1.准备数据
var xNum = ["2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-24","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29"],
      yLengthL = yLengthR = 60, 
      xLength  = xNum.length,
      str      = "招商银行(600036)fffffffffff",
      xData    = [],
      xTickNum = [],
      yData    = [];
for(var i =0;i<= xLength;i++){
    xTickNum.push(i);
    xData.push({x:i,y:(Math.random()*yLengthR)});
    yData.push({x:i,y:(Math.random()*yLengthL)});
    //xData.push({x:i,y:110});
    //yData.push({x:i,y:50});
}
//删除最后一个
xData.pop();
yData.pop();
//2.创建画布
var svg = d3.select("svg"),
    margin = {top: 40, left: 90, bottom: 100, right: 200},
    width  = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;
//3.建轴线的比例尺    
var xScale  = d3.scaleLinear().domain([0,xLength]).range([0,width]),
    yScale = d3.scaleLinear().domain([0,yLengthL]).range([height, 0]);
   
//4.创建x和y轴的生成函数
var xAxis = d3.axisBottom(xScale)
        .tickValues(xTickNum)   //指定刻度
        .tickFormat(formatTick);//对指定刻度进行转换
var yAxis = d3.axisLeft(yScale)
        .ticks(8)
        .tickSize(-width)
        .tickSizeOuter(6);
//5.创建xy轴
var g = svg.append('g').attr("transform","translate("+margin.left+","+margin.top+")");
    //创建x轴
    g.append("g").attr("class","axis--x").attr("transform","translate(0,"+yScale(0)+")")
        .call(xAxis)
        .selectAll(".tick text")
        .attr("text-anchor","middle")
        .attr('transform','translate('+(width/xLength)/2+',0)')
    
    //创建y轴
    g.append("g").attr("class","axis--y")
        .call(yAxis)
        .selectAll("text")
        .attr('dx','-1em');

    //图标题
    d3.select(".axis--y")
        .append("text")
        .attr("y",-10)
        .attr("text-anchor","start")
        .attr("font-size","14px")
        .attr("fill","#000")
        .text(str);           
//6.开始画曲线
var path =  g.append("g").attr("class","path").attr('transform','translate('+(width/xLength)/2+',0)');      
var positive_g = path.append('g');
    //画正舆情曲线 //square
    positive_g.call(createLine,xData,"line positive");
    //画曲线上的正方形
    positive_g.call(createSymbol,xData,"diamond",d3.symbolSquare);
            
var negative_g = path.append('g');
    //画负舆情曲线
    negative_g.call(createLine,yData,"line negative");
    //画曲线上的菱形
    negative_g.call(createSymbol,yData,"square",d3.symbolDiamond);

//开始画图例
var v_v = yLengthL/70,
    legendData1 = [{x:(xLength-0.3),y:0},{x:xLength,y:0},{x:(xLength+0.3),y:0}],
    legendData2 = [{x:(xLength-0.3),y:v_v},{x:xLength,y:v_v},{x:(xLength+0.3),y:v_v}];

//1.画蓝色图例
var legend = g.append('g').attr('class','legend').attr('transform','translate('+(40)+','+(-height/2)+')');
var square = legend.append('g').attr('class','square--squa');//.attr('transform','translate('+(0)+',-40)');
    square.call(createLine,legendData1,"line negative");
        legendData1.shift();
        legendData1.pop();
    square.call(createSymbol,legendData1,"square",d3.symbolDiamond);
    square.call(addDiscrible,"正舆情数(条)",4);
       
//2.画红色图例
var diamond = legend.append('g').attr('class','diamond--lege');
    diamond.call(createLine,legendData2,"line positive");
        legendData2.shift();
        legendData2.pop();
    diamond.call(createSymbol,legendData2,"diamond",d3.symbolSquare);
    
    diamond.call(addDiscrible,"负舆情数(条)",2);
    legend.select(".diamond--lege").attr('transform','translate(0,'+30+')');

//添加图例的文字
function  addDiscrible(container,str,num){
    container
        .append("text")
        .attr("font-size","14px")
        .attr("fill","#000")
        .attr('transform','translate('+(width+30)+','+(height+num)+')')
        .text(str);
}
//创建节点上的符号
function createSymbol(container,datas,className,symbols){
    container
          .selectAll("."+className)
            .data(datas)
            .enter()
            .append("path")
            .attr("d", d3.symbol().type(symbols))
            .attr("class",className)
            .attr('transform',function(d){
               return 'translate('+xScale(d.x)+','+yScale(d.y)+')';
           })
            ;
}
//创建曲线
function createLine(container,datas,className){
     var line = d3.line()
                .x(function(d) { return  xScale(d.x); })
             .y(function(d) { return  yScale(d.y); });
     container
          .append("path") 
          .datum(datas)
          .attr("class", className)
          .attr("d", line);
}
//取每个刻度对应的日期
function formatTick(d,i){
    return xNum[i];
}

</script>

© 著作权归作者所有

Nirow
粉丝 0
博文 5
码字总数 2497
作品 0
深圳
私信 提问
最好的 3 个开源 JavaScript 图表库

图表及其它可视化方式让传递数据的信息变得更简单。 对于数据可视化和制作精美网站来说,图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极...

04%
2018/09/24
0
0
将 React、D3 及其生态系统相互融合

React 和 D3.js 是能帮助我们处理页面元素及其所带来的挑战的伟大工具。它们当然可以一起工作,我们被赋予了在两个工具的界限之间去选择的能力。 —— 本文作者 马克思.西亚斯 自从2011年问世...

oschina
2018/07/09
1K
0
数据挖掘工程师如何选择数据可视化工具?

如何选择数据可视化工具? 如何选用数据可视化工具?在回答这个问题之前现需要回答另外一个问题,你需要用这些数据可视化工具来做什么,实现什么目的。 也许你有一个完整的想法,已经通过验证...

huangbo929
2017/07/03
0
0
[译] D3.js 之 d3-shap 简介

[译] D3.js 之 d3-shap 简介 译者注 原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape 译者: ssthouse 联系译者: 邮箱(ssthouse@163.com) & 微信(wssst123456789) 译文 假设你现...

ssthouse_hust
2018/07/02
48
0
「数据可视化库王者」D3.js 10个实例从入门到Vue应用

前言 近年来一直是最重要的数据可视化库之一,在创建者的维护下,前景依然无量,至少现在没有能打的: 与众多其他库的区别在于无限定制的能力(直接操作)。 它的底层提供对原生元素的直接控制...

前端劝退师
07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

UAVStack功能上新:新增JVM监控分析工具

UAVStack推出的JVM监控分析工具提供基于页面的展现方式,以图形化的方式展示采集到的监控数据;同时提供JVM基本参数获取、内存dump、线程分析、内存分配采样和热点方法分析等功能。 引言 作为...

宜信技术学院
23分钟前
5
0
MySQL的5种时间类型的比较

日期时间类型 占用空间 日期格式 最小值 最大值 零值表示 DATETIME 8 bytes YYYY-MM-DD HH:MM:SS 1000-01-01 00:00:00 9999-12-31 23:59:59 0000-00-00 00:00:00 TIMESTAMP 4 bytes YYYY-MM......

物种起源-达尔文
30分钟前
6
0
云服务OpenAPI的7大挑战,架构师如何应对?

阿里妹导读:API 是模块或者子系统之间交互的接口定义。好的系统架构离不开好的 API 设计,而一个设计不够完善的 API 则注定会导致系统的后续发展和维护非常困难。比较好的API设计样板可以参...

阿里云官方博客
33分钟前
5
0
Rancher + VMware PKS实现全球数百站点的边缘K8S集群管理

Sovereign Systems是一家成立于2007年的技术咨询公司,帮助客户将传统数据中心技术和应用程序转换为更高效的、基于云的技术平台,以更好地应对业务挑战。曾连续3年提名CRN,并且在2012年到2...

RancherLabs
38分钟前
5
0
6、根据坐标,判断该坐标是否在地图区域范围内

最近在写配送区域相关的代码,具体需求如下: 根据腾讯地图划分配送区域,总站下边设多个配送分站,然后将订单中的收货地址将其分配给不同的配送分站。 1、地图区域划分(腾讯地图) 1.1、H...

有一个小阿飞
40分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部