Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >用D3动画绘制曲线

问用D3动画绘制曲线
EN

Stack Overflow用户

提问于 2014-04-15 19:16:07

回答 1查看 1.4K关注 0票数 1

我在d3中做了一个简单的贝塞尔曲线。我想动画的曲线从:起点到终点。我想把动画拍成1.25s？

html

<div id="myelement">  
</div>

js:

var svg = d3.select('#myelement').append('svg'),
    curve = svg.append('path')
                 .attr('d', 'M0,200 C400,200 400,200 400,0')
                 .attr('stroke', '#fff')
                    .attr('fill-opacity', 0);

curve.transition()
       .attr('d', 'M0,200 C400,200 400,200 400,0')

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-15 20:10:50

这是一种非常酷的方法，我在回答另一个问题https://stackoverflow.com/a/13354478/151212时看到了一条曲线的动画。对于您的情况，代码如下所示：

var svg = d3.select('#myelement').append('svg'),
    curve = svg.append('path')
               .attr('d', 'M0,200 C400,200 400,200 400,0')
               .attr('stroke', '#000')
               .attr('fill-opacity', 0);

var length = curve.node().getTotalLength();

curve.attr("stroke-dasharray", length + " " + length)
     .attr("stroke-dashoffset", length)
     .transition()
       .duration(1250)
       .attr("stroke-dashoffset", 0);

票数 2

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23098364

复制

相关文章

编程算法 api javascript

D3.js提供了多种工具支持数据可视化的交互，其中d3.transition让简单而高效的为图像添加动画成为了可能。

vincentKo

2022/09/19

9710

用R语言绘制ROC曲线

https java 网络安全

1、roc曲线的意义 ROC曲线就是用来判断诊断的正确性，最理想的就是曲线下的面积为1，比较理想的状态就是曲线下的面积在0.8-0.9之间，0.5的话对实验结果没有什么影响。如图：

全栈程序员站长

2022/08/30

1K0

用matlab绘制分段函数曲线

java https 网络安全

x=linspace(-5,5,100); y=[]; for x0=x; if x0>0 y=[y,1/2*log(x0+sqrt(1+x0.^2))]; else y=[y,(x0+sqrt(pi))/exp(2)]; end end plot(x,y) 结果：

全栈程序员站长

2022/09/05

1K0

用matlab绘制分段函数曲线

用OpenGL进行曲线、曲面的绘制

实验目的 1）理解Bezier曲线、曲面绘制的基本原理；理解OpenGL中一维、二维插值求值器的用法。 2）掌握OpenGL中曲线、曲面绘图的方法，对比不同参数下的绘图效果差异；代码1：用四个控制点绘制一条三次Bezier曲线 #include "stdafx.h" #include <stdlib.h> #include <time.h> #include <GL/glut.h> //4个控制点的3D坐标——z坐标全为0 GLfloat ctrlpoints[4][3] = { { -4, -

Zoctopus

2018/06/04

3.2K0

绘制PR曲线[通俗易懂]

https 网络安全 python java 神经网络

运行darknet官方代码中的darknet detector valid data cfg weight指令（例如: darknet.exe detector valid data/koujian/koujian.data cfg/yolov3-tiny11.cfg backup/yolov3-tiny11_last.weights），可以在result/目录下得到网络检测的输出txt文件：包括检测的图像名字、类别、概率、边界框位置（左上角和右下角）:

全栈程序员站长

2022/09/14

1.6K0

3.3 绘制曲线

如何通过HTML5绘制曲线呢？可以百度搜索chart.js查看各类曲线绘制方法。此处我们介绍百度开源程序echarts绘制曲线。打开网页http://echarts.baidu.com/examples/#chart-type-line，找到折线图，我们开始一起学习：

周星星9527

2018/08/08

1.5K0

【R】-ROC曲线绘制

$predictions: num [1:200] 0.613 0.364 0.432 0.14 0.385 ...

黑妹的小屋

2020/08/06

6980

ROC曲线绘制原理及如何用SPSS绘制ROC曲线

ROC曲线（Receiver operating characteristic curve），即受试者工作特征曲线，主要用来评价某个指标对两类被试（如病人和健康人）分类/诊断的效果，以及寻找最佳的指标临界值使得分类效果最好。但是ROC曲线绘制的原理是什么，或者说如何一步步画出ROC曲线，以及如何用SPSS软件快速绘制出ROC曲线呢？对于很多新手朋友来说，对上述问题并不十分清楚。笔者这里对上述问题进行详细阐述，以期大家对ROC曲线有更深入的了解。

悦影科技

2020/11/18

5.5K0

ROC曲线绘制原理及如何用SPSS绘制ROC曲线

手把手教你用Graphpad绘制生存曲线

在临床研究中，生存曲线（又称Kaplan-Meier曲线）是最常用图片之一，旨在描述各组患者的生存状况。一张漂亮的、专业的生存曲线图不仅可以令编辑、读者和审稿专家眼前一亮，同时也能为论文增色不少。然而，对于一些新手而言，生存曲线却显得十分陌生，不知道为何要绘制生存曲线，也不知道该如何解读生存曲线的结果。

百味科研芝士

2021/01/07

9.5K0

手把手教你用Graphpad绘制生存曲线

TensorFlow绘制loss/accuracy曲线

https 网络安全

双y轴曲线图例合并是一个棘手的操作，现以MNIST案例中loss/accuracy绘制曲线。

全栈程序员站长

2022/11/17

9380

TensorFlow绘制loss/accuracy曲线

【ROC曲线专栏】如何快速绘制ROC曲线？

“针对某种疾病，现有A、B两种公认的诊断方法，你的团队研究出新诊断方法C。自然而然，肯定需要比较A、B、C三种方法，判断到底哪一种对该疾病的诊断更准确？”

Mark Chen

2020/11/02

3.5K0

【ROC曲线专栏】如何快速绘制ROC曲线？

ROC曲线纯手工绘制

假如，我想根据ca125的值判定一个人到底有没有肿瘤，找了10个肿瘤患者，20个非肿瘤患者，都给他们测一下ca125，这样就得到了30个ca125的值。

医学和生信笔记

2023/02/14

9140

R语言中绘制ROC曲线和PR曲线

这里，TP表示真阳性的数量（模型正确预测正类），FP表示误报的数量（模型错误地预测正类），FN表示假阴性的数量（模型错误地预测阴性类），TN表示真阴性的数量（模型正确预测阴性类）。

拓端

2020/07/16

2.1K0

用Python动画来展示二阶贝赛尔曲线

编程算法 python matlab numpy

但实际上我们说的不是这个叫贝克汉姆的英国男人，而是另外一个人，就是下面这个叫“皮埃尔·贝塞尔”（Pierre Bézier）的法国男人：

Crossin先生

2020/04/08

1.2K0

用Python动画来展示二阶贝赛尔曲线

用动画的方式画出任意的路径（直线、曲线、折现）

发布于 2017-11-20 00:49 更新于 2017-11-20 01:07

walterlv

2018/09/18

7160

用动画的方式画出任意的路径（直线、曲线、折现）

R语言绘制绘制ROC和PR曲线（总结）

（1）总结常用的绘制ROC和PR曲线的R包（2）生存预测模型的时间依赖性ROC曲线

用户1359560

2019/06/20

8.4K0

SAS-生存曲线的绘制...

sas output proc

生存分析是临床试验中经常用到的一种方法，生存曲线的绘制当然也是非常常见的，常见于肿瘤、绝症相关的研究中...今天小编打算分享一段小编画生存曲线的一段代码...

Setup

2019/10/20

7.7K0

使用Python-VTK绘制曲线

python render spline vtk 工具

import vtk points = vtk.vtkPoints() # 定义一个点工具 points.InsertPoint(0, 329, 338, 45) # 使用InsertPoint可以插入点 #注意：points.InsertPoint(a, b, c, d) #其中a表示点的序号，(b,c,d)表示点的三维坐标 points.InsertPoint(1, 328, 319, 46) points.InsertPoint(2, 300, 329, 96) #定义曲线工具 #将前面的几个点插

用户5513909

2023/04/25

1.2K0

使用Python-VTK绘制曲线

生存资料校准曲线的绘制

前面我们已经讲过logistic模型的校准曲线的画法，这次我们学习生存资料的校准曲线画法。

医学和生信笔记

2022/11/15

8560

使用 matplotlib 绘制多彩的曲线

例如，norm = BoundaryNorm([-1, -0.5, 0.5, 1], 3)，将[-1,-0.5]，(-0.5,0.5)，[0.5, 1]分别映射一种颜色。

iam002

2021/08/25

3.4K0

使用 matplotlib 绘制多彩的曲线

相似问题

用D3绘制Kaplan曲线

13

用Python绘制玛雅曲线的动画

16

wpf用动画按顺序绘制多条曲线

14

无法用负值绘制D3曲线

12

在matplotlib动画上用图例绘制多条曲线

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例