文档章节

d3动态坐标图

Nirow
 Nirow
发布于 2016/08/30 12:24
字数 677
阅读 213
收藏 0

代码:

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="800" height="600"></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>


var datas0 = [{x:0.1,y:4},{x:0.5,y:8}],
     datas1 = [{x:0.2,y:2},{x:0.8,y:6}],
     datas2 = [{x:0.6,y:8},{x:1.1,y:4}],
     datas3 = [{x:0.8,y:2},{x:1.3,y:1}],
     datas4 = [{x:1.0,y:8},{x:1.5,y:-3}],
     datas5 = [{x:1.4,y:2},{x:1.8,y:-5}],
     datas6 = [{x:1.8,y:0},{x:2,y:-8}];

var color = function(index){
     var arr = ["#FF0000","#FFFF00","#00FF00","#0000FF","#00FFFF","#FF00FF","#276419",];
     return arr[index%arr.length];
}
var bigArr  = [{"data":datas1},{"data":datas2},{"data":datas3},{"data":datas4},{"data":datas5},{"data":datas6}];

var textData = [],
      days = 12, //getLastDay(2017,2); //参数:<年,d月> 
      yLength = 20,
      xLength = 2,
      step = yLength*(1/days+1)/days;
for(var i =0;i<days;i++){
    textData.push({x:2,y:(yLength/2-step*i)});
}
var svg = d3.select("svg"),
    margin = {top: 40, left: 40, 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-  margin.left-margin.right]);
var yScale = d3.scaleLinear().domain([-yLength/2, yLength/2]).range([height-margin.top-margin.bottom, 0]);

var line = d3.line()
    .x(function(d){return d.x;})
    .y(function(d){return yScale(d.y);})
    ;

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

var leftCirle =g.append("g").selectAll("circle").data(datas0).enter().append("circle")
        .attr("transform",function(d){
           return "translate("+xScale(d.x)+","+yScale(d.y)+")";
         })
        .attr("r",10)
        .attr("opacity","0.6")
        .attr("fill",function(d,i){  return color(i); })
        .attr("cx",function(d){ return d.x;})
        .attr("cy",function(d){ return d.y;});

var lineData = textData.length <=1 ? [textData[0]] : [textData[0],textData[textData.length-1],];
var rightLine = g.append('g').append('path')
        .attr('d',line(lineData) )
        .attr("transform",function(d){ return "translate("+(xScale(xLength*1.15))+",0)"; })
        .attr('stroke', "#000")
        .attr('stroke-width', "2")
        ;
var rightCicleG = g.append('g').attr("transform",function(d){ return "translate("+(xScale(xLength*1.15))+",0)"; });
var rightCircle = rightCicleG.append('circle').datum(textData[0])
        .attr('cx',textData[0].x)
        .attr('cy',yScale(textData[0].y))
        .attr('r', 10)
        .attr('fill', '#999999')
        ;

    //添加线右边的日期
    rightCicleG.selectAll("text").data(textData).enter().append('text').attr("transform", "translate(10,5)")
        .attr('x',function(d){return d.x; })
        .attr('y',function(d){return yScale(d.y);})
        .attr("cursor",'pointer')
        .text(function(d,i){ return "2016年"+(1+i)+"月"; })
        .on("click",toggleMorT);
    //创建x轴
    g.append("g").attr("class","axis axis--x").attr("transform","translate(0,"+yScale(0)+")")
        .call(d3.axisBottom(xScale).tickSize(-6).ticks(10).tickFormat(function(d,i){return i%2==0?'':d.toFixed(1);}))
        .selectAll(".tick text").attr("dy","1.3em");
    //添加x轴名称
    g.selectAll(".axis--x")
        .append('text')
        .attr("transform","translate("+xScale(xLength*1.03)+","+yScale(yLength/2*0.9)+")")
        .attr("fill","#000")
        .attr("font-size","12px")
        .text("XXX")
        ;
    //创建y轴
    g.append("g").attr("class","axis axis--y")
        .call(d3.axisLeft(yScale).tickSize(-6))
        .append('text')
        .attr("transform","translate(20,-20)")
        .attr("fill","#000")
        .attr("font-size","12px")
        .text("XXX(%)");
//yAxis.tickSizeOuter(6);
//获取当月最后一天
function getLastDay(year,month){
    var day = new Date(parseInt(year),parseInt(month),0);
    return day.getDate();
}
console.log(getLastDay(2017,2));
//控制圆圈移动与停止
var isStop = false;
function toggleMorT(){
    
    if(!isStop) {
        isStop = true;
        In.stop();
    }else {
        if(j>=textData.length)  return;
        isStop = false;
       In = d3.interval(move,1500);
    }
}

//移动右边的圆
function moveRightCircle(){
    leftCirle.transition().duration(1000).on("start",slide);
}
var t=-1,
      obj;
function slide(d,i){
    if(i==0)  t++;
    if(t>=len)  return;
    obj= bigArr[t].data;
    d3.active(this)
        .attr("transform",function(){
           return "translate("+xScale(obj[i].x)+","+yScale(obj[i].y)+")";
         })
        .attr("cx",obj[i].x).attr("cy",obj[i].y);
}
//移动左边的圆
function moveLeftCircle(y){
    rightCircle.transition().duration(1000).attr("cy",y);
}
var j = 1,
     len = bigArr.length;
function move(){
    if(j<=len)  moveRightCircle();
    var y = textData[j].y;
    moveLeftCircle(yScale(y));

    j++
    if(j>=textData.length)  In.stop();
}
//定时任务:启动动画
var In = d3.interval(move,1500);

</script>

© 著作权归作者所有

Nirow
粉丝 0
博文 5
码字总数 2497
作品 0
深圳
私信 提问
WPF 动态模拟CPU 使用率曲线图

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

junwong
2012/03/09
669
0
【D3.js数据可视化系列教程】--(十)更自由的条形图

准备数据 绘制条形图的输入数只需要一个表示每个条数据量的数组就行。 2. 创建SVG元素 3. 绘制矩形条 这里会使用D3经典的select-data-enter-append-attr/style的编程套路。 也就是选择元素-...

孟飞阳
2018/08/06
22
0
用 vue + d3 画一棵树

结果预览 github pages vue 和 d3 的角色 画图可分为两步: 元素坐标计算 数据绑定 坐标计算只需要一些 api,本文使用 d3。 数据绑定既可以借助 d3,也可以使用 vue。d3 通过操作 dom 实现,...

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

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

前端劝退师
07/05
0
0
以 Join 的方式来思考D3.js

声明 原文链接: 来自 D3作者 Mike Bostock bost.ocks.org/mike/join/ 译文地址: github repository 如果觉得还不错, 不妨去github给个star ? Content 打个比方, 你想用D3画一个 , 用每一个s...

ssthouse
2018/06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部