d3动态坐标图

最新推荐文章于 2022-02-23 15:52:55 发布
最新推荐文章于 2022-02-23 15:52:55 发布
阅读量273 收藏
点赞数
原文链接：https://my.oschina.net/u/2400064/blog/739758
版权

代码：

<!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>

转载于:https://my.oschina.net/u/2400064/blog/739758

chuibeijin8503
关注
Matlab 坐标图动画：动态显示数据点云
GjjrDictionary的博客
09-29 395
在本文中，我们将探讨如何使用Matlab创建一个动态的坐标图动画，以实时显示数据点云。我们将介绍一些基本的绘图函数和动画技术，以便您可以根据自己的需要进行修改和扩展。现在，当您运行上述代码时，将显示一个动态的坐标图动画，逐步显示数据点云。每个迭代将逐渐添加更多的点，直到显示完整的点云。首先，让我们定义一个示例数据集，这将是我们要显示的点云。接下来，我们将创建一个Matlab图形窗口，并设置一些基本的绘图参数，如坐标轴范围和标题。每一行表示一个点的坐标，其中第一列是X坐标，第二列是Y坐标，第三列是Z坐标。
d3js完整柱形图
hb707934728的博客
02-24 1853
效果： 完整的柱形图 .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .MyRect { fi
d3js绘制y坐标轴_D3.js小练习_动态更新坐标系和网格
weixin_42500791的博客
01-17 481
HTML导入代码模板：练习//坐标轴var height = 500,width = 500,margin = 25,xScale,yScale,xAixs,yAixs;var xAxisWidth = width - 2 * margin;var yAxisWidth = height - 2 * margin;var svg = d3.select("body").append("svg")....
数据可视化(8)--D3数据的更新及动画
weixin_33726313的博客
03-01 278
最近项目组加班比较严重，D3的博客就一拖再拖，今天终于不用加班了，赶紧抽点时间写完~~ 今天就将D3数据的更新及动画写一写~~ 接着之前的博客写~~ 之前写了一个散点图的例子，下面可以自己写一个柱状图的例子。 我就直接给代码了，和散点图差不多~~ var margin = {top: 20, right: 20, bottom: 30, left: 40}, width =...
数据可视化 D3 图表的绘制（三）添加坐标轴
一只菜鸡
10-30 1796
坐标轴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
d3 绘制平行坐标图 （多维csv数据共享）
陈杉菜
11-20 3120
数据可视化的作业（说实在我刚看到这个的时候有点不敢相信，因为我甚至不知道这是什么图 百度得到答案：（真的好官方没有太大用处系列） 平行坐标是可视化高维几何和分析多元数据的常用方法。 为了在n维空间中显示一组点，绘制由n条平行线组成的背景，通常是垂直且等距的。所述的点N 维空间被表示为折线与顶点在平行的轴线； 第i 轴上顶点的位置对应于该点的第i个坐标。 此可视化与时间序列可视化密切相关，除了它应用...
基于d3.js实现实时刷新的折线图
10-21
d3.js的核心思想是通过数据来操作文档，将数据与SVG元素关联起来，以实现动态可视化。 2. **SVG图形**：d3.js 使用SVG（Scalable Vector Graphics）作为其默认的图形绘制环境。SVG是一种矢量图形格式，支持缩放而...
D3静态拓扑图
12-26
在本场景中，我们关注的是D3静态拓扑图的实现。 D3静态拓扑图是一种用于展示网络、系统或者复杂关系图表的可视化工具。它可以帮助用户理解各种实体（如服务器、路由器、进程等）之间的连接和交互，常被用在IT管理、...
D3.js实现散点图和气泡图的方法详解
10-21
D3.js利用数据来驱动文档的更新，它提供了丰富的工具和方法来创建动态和交互式的图表。 在开始编码之前，我们首先需要搭建画图的框架。使用HTML和SVG元素构建一个包含SVG容器的基本HTML结构，其中SVG容器用来容纳...
使用d3.js实现的柱状图效果，带坐标轴
03-20
使用d3.js实现的柱状图效果，带坐标轴，可以直接下载使用。
d3.js实现动态拓扑图
10-24
利用d3.js插件实现动态拓扑图，动态增加节点，删除节点，结合拖拽操作，实现一个简单的演示
matplotlib.animation_盘一盘 Python 系列特别篇 Matplotlib Animation
weixin_39556891的博客
11-21 541
本文含3400字，15图表截屏建议阅读20分钟在公众号对话框回复 MANI获取完整 Jupyter Notebook感谢 EasyShu 公众号主理人张杰博士的帮助本文是 Python 系列的特别篇的第十三篇特别篇 1 -PyEcharts TreeMap特别篇2 - 面向对象编程特别篇 3 - 两大利「器」特别篇4-装饰器特别篇 5-Sklearn 0.22特别...
C语言绘制动态坐标图,如何用c语言编写动态烟花
weixin_35952427的博客
05-16 1783
如何用c语言编写动态烟花用c语言编写动态烟花的方法：首先绘制菜单界面显示文字；然后设置烟花有上升阶段和爆炸阶段，定义烟花和烟花弹结构体；最后初始化数据，加载资源贴图，随机发射数目随机。用c语言编写动态烟花的方法：效果展示总体框架/****************************************** 项目名称：浪漫烟花* 项目描述：贴图* ...
D3.js 中动态计算 x 轴 y 轴的宽度以及偏移量
法研鲁迅的个人博客
03-05 2187
在 D3.js 中经常会遇到这样的情况：某一坐标轴不能正确展示的情况。 这就需要动态的计算坐标轴的宽度/高度，进行相应的偏移来使坐标轴达到合适的地方。
d3实现网络拓扑图可视化展示，动态修改数据
小阮的笔记本
02-23 4239
d3.js 拓扑关系图 可视化 动态修改数据 动画
SVG 中的基础图形(rect , line ,circle 等)以及在 D3.js 中的应用
法研鲁迅的个人博客
03-15 4549
SVG 中的基础图形(rect , line ,circle 等)以及在 D3.js 中的应用 文章目录SVG 中的基础图形(rect , line ,circle 等)以及在 D3.js 中的应用矩形 - rect直线 - line圆形 - circle椭圆 - ellipse 在 D3.js 中,根据要展示的数据,我们挑选合适的 svg 中的基础图形,然后进行一系列的设置等,使其达到我们的要求...
D3.js 画 力导向图 带箭头 文字 圆形节点 动态添加节点
老徐的博客
05-09 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; [role=entity]{
【D3.js】使用D3.js快速实现拓扑图的绘制
热门推荐
weixin_39085822的博客
06-21 1万+
D3的简介 D3 全名为 Data Drive Document，即通过 Data 操作 Document，而在做数据可视化时，Data 最常 Drive 的 Document 便是 SVG。刚了解到D3时,看到D3官网非常丰富且酷炫的Demo,便觉得 D3 应该有着无限可能的图形开发能力,所以在学习完基础的API和SVG的基础后,就开始着手绘制D3的节点拓扑图了; 绘制简易的可拖拽节点拓扑图 2.1 准备工作: 安装D3: npm install d3 --save 项目中导入D3: imp.
可视化工具–D3–坐标轴的使用
可视化大猩猩
08-21 2398
可视化工具–D3–坐标轴的使用
d3js添加柱状图添加xy轴坐标
最新发布
07-13
### 回答1： 在使用d3.js添加柱状图时，我们可以通过以下步骤来添加XY轴坐标： 1. 创建画布：首先，我们需要创建一个SVG画布，并设定合适的宽度和高度，以容纳我们的柱状图和坐标轴。 2. 设定比例尺：根据数据的范围，我们需要设定一个比例尺来将数据映射到坐标轴上。比例尺可以是线性比例尺（d3.scaleLinear()）或者是序数比例尺（d3.scaleOrdinal()）。根据需要设定x轴和y轴的比例尺。 3. 创建坐标轴：使用d3.axis()函数创建一个坐标轴生成器，并通过指定比例尺和方向来定制坐标轴的样式和刻度。 4. 渲染坐标轴：将坐标轴生成器应用到x和y轴上，并通过translate()函数设置坐标轴的位置。例如，通过将x轴定位在底部，y轴定位在左边。 5. 创建柱状图：使用绑定数据的方式，通过SVG的矩形元素或g元素创建柱状图。可以根据数据的值来设定柱状图的宽度、高度和位置。 6. 添加动画效果（可选）：通过使用d3的过渡函数（transition）和延迟函数（delay），可以为柱状图添加动画效果，使其显示变得平滑。 7. 标记坐标轴刻度（可选）：可以使用d3的tickFormat函数来设定坐标轴上刻度的显示格式，如千位分隔符等。 通过以上步骤，我们就可以用d3.js添加柱状图并添加XY轴的坐标了。具体实现的代码可以参考d3.js的官方文档或相关教程。 ### 回答2： 在使用d3.js创建柱状图时，我们需要添加x和y轴坐标来帮助展示数据的分布和比较。下面是添加xy轴坐标的步骤： 1. 创建一个svg元素来容纳整个图表。可以使用d3.select方法选择一个div元素，并通过append方法添加一个svg元素。 2. 设置svg元素的宽度和高度，以及padding值，以便给轴线留出足够的空间。 3. 创建一个x轴比例尺。根据柱状图的数据范围和svg的宽度，使用d3.scaleLinear方法创建一个线性比例尺。 4. 创建一个y轴比例尺。根据柱状图的数据范围和svg的高度，使用d3.scaleLinear方法创建一个线性比例尺。 5. 创建一个x轴生成器。使用d3.axisBottom方法创建一个x轴生成器，并传入之前创建的x比例尺。 6. 创建一个y轴生成器。使用d3.axisLeft方法创建一个y轴生成器，并传入之前创建的y比例尺。 7. 将x轴生成器应用到svg元素上的一个g元素上，并通过transform属性将其放置在适当的位置。 8. 将y轴生成器应用到svg元素上的一个g元素上，并通过transform属性将其放置在适当的位置。 9. 如果需要，可以对x轴和y轴进行一些样式设置，比如设置轴线颜色、刻度颜色、文本颜色等。 10. 最后，将柱状图绘制到svg元素上。可以使用d3.select方法选择之前创建的g元素，并通过data和enter方法添加rect元素来表示柱子。可以根据x和y比例尺的返回值来设置每个柱子的位置和高度。 以上就是使用d3.js添加xy轴坐标的基本步骤。根据实际需求和个性化要求，你可以对以上步骤进行进一步的扩展和样式设置。 ### 回答3： 要在d3js中添加柱状图并添加坐标轴，首先需要以下步骤： 1. 创建SVG元素：使用d3.select选择一个HTML元素，然后添加一个SVG元素，设置其宽度和高度。例如： var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 2. 创建坐标轴比例尺：使用d3.scaleBand()创建x轴比例尺，使用d3.scaleLinear()创建y轴比例尺。然后设置其域和范围。例如： var x = d3.scaleBand() .range([0, width]) .domain(data.map(function(d) { return d.x; })); var y = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(data, function(d) { return d.y; })]); 3. 添加柱状图：使用d3.selectAll选择所有柱子的元素，然后使用data()方法将数据绑定到这些元素上。然后使用enter()方法进入上次缺失的元素，并使用append()方法添加矩形元素作为柱子。例如： svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.x); }) .attr("y", function(d) { return y(d.y); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.y); }); 4. 添加坐标轴：使用d3.axisBottom()创建x轴，使用d3.axisLeft()创建y轴。然后使用call()方法将坐标轴添加到SVG元素中。例如： svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .call(d3.axisLeft(y)); 以上就是在d3js中添加柱状图并添加坐标轴的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值