文档章节

d3.js 三坐标曲线图

Nirow
 Nirow
发布于 2016/08/31 14:36
字数 666
阅读 406
收藏 0

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis--x line,.axis--y line {stroke-opacity:.2;}
.axis--x path,.axis--y path { display: none;}
.line { fill: none; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round;}
.negative{stroke: #d0c943;} /* 负舆情 */
.square{fill: #d0c943;} /* 正方形 */
.positive{stroke: #41CD18;}/* 正舆情 */
.diamond{fill: #41CD18;} /* 菱形 */
.price{stroke: #16eae6;} /* 股价 */
.triangle{fill:#16eae6;} /* 三角形 */


</style>
<svg width="1000" height="400"></svg>
<script src="d3.v4.min.js"></script>
<script src="jquery-3.1.0.min.js"></script>

<script>


var xNum = ["0801","0802","0803","0804","0805","0806","0807","0808","0809","0810","0811","0812","0813","0814","0815","0816","0817","0818","0819","0820","0821","0822"],
      yLengthL = 120, 
      yLengthR = 30,
      xLength  = xNum.length,
      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.pop();
yData.pop();
var svg = d3.select("svg"),
    margin = {top: 40, left: 90, bottom: 100, right: 100},
    width  = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;
//三条轴线的比例尺    
var xScale  = d3.scaleLinear().domain([0,xLength]).range([0,width]),
    yScaleL = d3.scaleLinear().domain([0,yLengthL]).range([height, 0]),
    yScaleR = d3.scaleLinear().domain([0,yLengthR]).range([height,0]);

var xAxis = d3.axisBottom(xScale)
        .tickValues(xTickNum)   //指定刻度
        .tickFormat(formatTick);//对指定刻度进行转换

var g = svg.append('g').attr("transform","translate("+margin.left+","+margin.top+")");

    //创建x轴
    g.append("g").attr("class","axis--x").attr("transform","translate(0,"+yScaleL(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 left") //tickSize:刻度线的长度,ticks:不是很清楚这个参数的作用
        .call(d3.axisLeft(yScaleL).ticks(8).tickSize(-width)).selectAll("text").attr('dx','-1em');

    //创建y轴(右边)
    g.append("g").attr("class","axis--y right")
        .call(d3.axisRight(yScaleR).ticks(8).tickSize(0))
        .attr('transform','translate('+(width+10)+','+'0)')

var L_arr = ['舆','情','数','量','/','条'],  //左Y轴名    
    r_arr = ['日','收','盘','价','/','元'];     //右Y轴名
   
    d3.select(".left")
        .append("text")
        .attr("x",-40)
        .attr("y",70)
        .call(newLine,L_arr);
            
    d3.select(".right")
        .append("text")
        .attr("x",30)
        .attr("y",70)
        .call(newLine,r_arr);

//线段生成器
var line_R = d3.line()
    .x(function(d) { return  xScale(d.x); })
    .y(function(d) { return  yScaleR(d.y); });
var line_L = d3.line()
    .x(function(d) { return  xScale(d.x); })
    .y(function(d) { return  yScaleL(d.y); });

//符号生成器
var symbol = d3.symbol();

var path =  g.append("g").attr("class","path").attr('transform','translate('+(width/xLength)/2+',0)');

var price_g = path.append("g");
    //收盘价曲线
    price_g.call(createLine,xData,"line price",line_R); 
    //曲线上的三角形
    price_g.call(createSymbol,xData,"triangle",d3.symbolTriangle,yScaleR);
        
var positive_g = path.append('g');
    //正舆情曲线 //square
    positive_g.call(createLine,xData,"line positive",line_L);
    //曲线上的正方形
    positive_g.call(createSymbol,xData,"diamond",d3.symbolSquare,yScaleL);
        
      
var negative_g = path.append('g');
    //负舆情曲线
    negative_g.call(createLine,yData,"line negative",line_L);
    //曲线上的菱形
    negative_g.call(createSymbol,yData,"square",d3.symbolDiamond,yScaleL);

//创建每个节点上的符号
function createSymbol(container,datas,className,symbols,yScale){
    container
          .selectAll("."+className)
            .data(datas)
            .enter()
            .append("path")
            .attr("d", symbol.type(symbols))
            .attr("class",className)
            .attr('transform',function(d){
               return 'translate('+xScale(d.x)+','+yScale(d.y)+')';
           })
            ;
}
//创建曲线
function createLine(container,datas,className,line){
     container
          .append("path") 
          .datum(datas)
          .attr("class", className)
          .attr("d", line);
}
//取每个刻度对应的日期
function formatTick(d,i){
    return xNum[i];
}
//换行函数    
function newLine(text,datas){
    text.selectAll("tspan")
        .data(datas)
        .enter()
        .append('tspan')
        .attr("x",text.attr("x"))
        .attr("dy","1.2em") //上下字间距
        .attr("font-size","12px")
        .attr("fill","#000")
        .text(function(d){return d;})
}
</script>

© 著作权归作者所有

上一篇: d3.js折线图
下一篇: d3动态坐标图
Nirow
粉丝 0
博文 5
码字总数 2497
作品 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
53
0
WPF 动态模拟CPU 使用率曲线图

在工作中经常会遇到需要将一组数据绘制成曲线图的情况,最简单的方法是将数据导入Excel,然后使用绘图功能手动生成曲线图。但是如果基础数据频繁更改,则手动创建图形可能会变得枯燥乏味。本...

junwong
2012/03/09
681
0
d3.js中如何在image上画图

项目需要在图片上标注矩形框,矩形框的坐标已知,但是是在图片上的坐标,而不是画布的坐标,例如,一张原本2000x2000的图片,放在一个400x400的画布内,矩形框的坐标是以这个2000x2000来的,...

cjb0725
2016/11/09
1K
0
Qt图表库--QCustomPlot

Qt中使用的一个用来画曲线图、趋势图、坐标图、柱状图等类似二维图的库,可在自己的项目中直接使用两个源文件,或预先编译成库。

lhyhb
2013/07/10
18.4K
0
C#使用GDI+绘制实时曲线图

在实际项目中我们经常需要绘制一些实时的数据图片,比如当前各公司的用水量、用电量还有播放声音视频时实时显示当前的声频等等,在我们最熟悉的任务 管理器也有这么一个功能,用来表示当前C...

Yamazaki
2013/11/14
520
0

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
27分钟前
4
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
27分钟前
5
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
52分钟前
7
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
54分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
57分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部