如何在一条又一条路径上显示d3中的过渡？
在d3中，可以使用过渡（transition）来实现在一条又一条路径上显示的效果。过渡是d3中用于在元素之间进行动画效果过渡的机制。
要在一条又一条路径上显示过渡效果，可以按照以下步骤进行操作：
- 创建SVG画布：首先，需要创建一个SVG画布，用于显示图形和动画效果。可以使用d3.select()方法选择一个DOM元素，并使用append()方法添加一个SVG元素。
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);- 创建路径元素：使用d3中的path元素来创建路径，可以使用d3.line()方法定义路径的形状和样式。例如，可以使用d3.line().x()和d3.line().y()方法设置路径的x和y坐标。
var path = svg.append("path")
.datum(data)
.attr("d", d3.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })
);- 创建过渡效果：使用d3中的transition()方法创建一个过渡对象，并使用duration()方法设置过渡的持续时间。可以使用attrTween()方法来设置路径的过渡效果。
path.transition()
.duration(2000)
.attrTween("stroke-dasharray", function() {
var length = path.node().getTotalLength();
return function(t) {
return (d3.interpolateString("0," + length, length + ",0"))(t);
};
});在上述代码中，使用attrTween()方法设置了路径的stroke-dasharray属性，通过插值函数来实现路径的过渡效果。在过渡的持续时间内，路径会从一条不可见的线段逐渐显示出来。
这是一个简单的示例，实际应用中可以根据具体需求进行更复杂的路径过渡效果的设计。对于更多关于d3的过渡效果的详细信息，可以参考d3官方文档。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我试着用d3.js制作两行图。我只在一个轴上增加了缩放。一旦我增加了一个过渡(吐温)，变焦是有点奇怪。如果我放大足够的话，某些点就会丢失。这不是在吐温结束的时候发生的。当有更多的观点时，错误的行为就会更加突出。继续放大，并在这里尝试：
告诉我我做错了什么。谢谢。
let d3svg = d3.select("body").append("svg")
.attr("height", "500")
.attr("width", "500");
d3svg.selectAll("g&#
浏览 0提问于2018-12-26得票数 1
回答已采纳
我想为nest创建的每个路径向svg中添加圆，这样这些圆就可以引导路径的绘制。类似于this fiddle，但使用嵌套数据。 下面是d3.v4中的一些可重现的示例代码，以及我想要添加圆圈的路径的可运行片段： var data=[{group:1,x:6,y:8},
{group:1,x:4,y:4},
{group:1,x:1,y:2},
{group:2,x:8,y:3},
{group:2,x:1,y:6},
{group:2,x:7,y:5},
{group:3,x:7,y:1},
{group:3,x:6,y:6},
{group:3,x:3,y:
浏览 23提问于2020-10-17得票数 0
回答已采纳
1回答
我试图用D3绘制一条贝塞尔曲线。我的代码工作，但唯一的问题是，一旦我使值为负值，我的曲线离开了框架。
var bezierLine = d3.line()
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; })
.curve(d3.curveBasis);
var svg = d3.select("#chart")
.append("svg")
.attr("width", 400)
.attr("height&#
浏览 2提问于2020-05-17得票数 1
回答已采纳
我试图在D3中绘制一条路径线。我可以让其他的转换工作起来，比如淡出效果，但是在研究了如何转换路径之后，似乎最好的选择就是修改笔画达沙雷。
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Test Drive for data ",
"time": &
浏览 0提问于2018-04-18得票数 0
回答已采纳
我有一个D3折线图，其中一条线是在加载时添加的，两条线是在用户按下按钮后动态添加的。第二行应从原始行过渡，第三行应从第二行已完成过渡的位置过渡。我已经让它部分工作了，但最后一条线在过渡发生之前就已经画好了，然后在过渡开始时就被移除了，这看起来很奇怪。我如何修改代码，使这条最终的过渡线不会在过渡发生之前绘制。原始行： function drawAD(){
//setup original line
var aggregateDemandLine = d3.line()
.x(function(d,i){return xScale(ADX[i])})
.y(function(d,i){ret
浏览 7提问于2019-05-25得票数 0
我已经创建了一个折线图(D3 V4)，并试图显示它，以便首先显示时间序列中的第一个点，然后逐渐显示其余的点。
我的x轴是一个介于-1和1之间的‘得分’，y轴是时间。
我想使用Mike Bostock在这里创建的过渡技术： ( D3 V3)然而，当我实现这段代码时，这行代码没有显示任何过渡效果，并且出现了一个黑色区域填充:(我认为这是因为V3和V4 of D3之间的差异，但是我的谷歌搜索并没有帮助我找到破坏的地方。
我的数据是用d3.json("URL_TO_DATA"..看起来像这样：
[{"date": "2017-07-30-15-01",
浏览 0提问于2017-08-08得票数 1
回答已采纳
I animated two lines with d3.js here.第一行有我想要的虚线笔划--dasharray。第二行有我想要的行为(重复地增长和消失)。 如何绘制一条反复增长和消失的虚线？ const width = 300,
height = 50;
let pathLength;
let pathLength2;
const svg = d3.select("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append('path')
.attr('
浏览 22提问于2020-11-01得票数 1
回答已采纳
我可以用这样的方式画一条曲线：
const svg = d3.select("#line-svg");
const lineWidth = 6;
// Scale.
const scaleX = d3.scaleLinear()
.domain([0, 300])
.range([0, parseFloat(svg.style("width"))]);
const scaleY = d3.scaleLinear()
.domain([0, 120])
.range([0, parseFloat(svg.style("height&#
浏览 8提问于2020-11-18得票数 0
回答已采纳
1回答
我正在尝试创建一个动画，其中圆圈是在多个路径上动画。
我能够得到我想要的其中一条路径的动画，但不确定为什么圆圈只在特定的路径上动画，而不是按照它们所属的路径分布。
完整的代码可以在我的bl.ocks页面上找到：
这是它的主要部分。
var path = svg.selectAll("path")
.data(data.filter(function(d){
return d.From > 2010
}))
.enter()
.append("path")
.style("s
浏览 3提问于2017-12-09得票数 1
回答已采纳
1回答
我已经创建了一张线图。现在我试着在里面添加动画。线图是多线图。当我试图将动画放在两行中时，代码不起作用，当我评论第二行的动画代码时，它就适用于第一行。
动画在这两行一起是不工作的。
以下是codepen链接中的codepen - 链接“第二行代码(动画)注释”
代码：
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="lineChartGph" class="lin
浏览 0提问于2018-07-02得票数 1
回答已采纳
1回答
请看的工作，但简洁明了的版本，我想:一个d3动画模拟，在实时，一条线的路径正在绘制的人。
对于我目前的实现，我有两个问题：
波涛汹涌。您可以看到路径的每一段以块的形式出现，而不是看起来像是一支笔在屏幕上移动的路径。一种解决办法是使每个块变小--还有其他的解决方案吗？
它是递归的。递归地用setTimeout()调用绘图感觉与d3精神是对立的。是否有更声明性的解决方案？也许是使用transition()的
Javascript
var svg = d3.select("body").append("svg")
浏览 1提问于2013-12-20得票数 4
回答已采纳
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=rightbanner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.221 Safari/537.36 SE 2.X MetaSr
浏览 486提问于2018-02-02
1回答
我刚开始在D3中玩推特，一开始看起来很容易，但现在我很难在我的当前代码中实现这一点：
推特到一个特定的点，例如:从0,0到lineData4
从lineData4推回0,0点
(可能使用按钮来控制这一点)
这是我目前的代码：
//The data for our line
var lineData = [
{ "x": 1, "y": 5}, { "x": 20, "y": 20},
{ "x": 40, "y": 10}, { "x": 60,
浏览 1提问于2017-04-04得票数 2
回答已采纳
1回答
我对d3.js相当陌生
我正在寻找一种方法，以动画x和y轴的基础上的新数据。所以这是一种实时动画，x轴在移动，新数据从右轴和y轴中弹出，也会动态更新，过了一段时间，旧数据就消失了，因为我有那么多数据点。
我已经做好了这张图表。
// set the dimensions and margins of the graph
const margin = {
top: 40,
right: 80,
bottom: 60,
left: 50
},
width = 600 - margin.left - margin.right,
height = 3
浏览 5提问于2022-03-02得票数 0
1回答
我试图用d3创建svg路径，并试图理解如何让d3基于单独的数据创建路径。
例如，这里有path Value的固定数据和两个单独的集( index1 and index2. )我希望基于这些创建路径，这意味着我希望完全创建11路径，而下面的代码只创建8路径。
const width = 1280;
height = 720;
svg = d3.select('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('viewBox', `0 0 ${wi
浏览 4提问于2022-07-06得票数 0
回答已采纳
1回答
我试着用ClipPath用圆圈剪短一条线，并通过拖动成功地完成了它。这是我的工作守则；
function clipData(svg, cx, cy) {
var clip = svg.append("defs")
.append("clipPath") // define a clip path
.attr("id", "clip") // give the clipPath an ID
.append("circle") // shape it as
浏览 5提问于2019-09-18得票数 3
1回答
我试图在一条被剪裁的小路上拖动一组形状。这是第一次，它工作良好，但当我开始拖动，剪裁根本不起作用。
这是我的工作代码；
var svg = d3.select("svg");
// draw a circle
svg.append("clipPath") // define a clip path
.attr("id", "clip") // give the clipPath an ID
.append("circle") // shape i
浏览 0提问于2019-09-13得票数 0
关于d3的文档提供了一个如何设置的示例
var line = d3.line().curve(d3.curveBundle.beta(0.5));
然而，提供的β值似乎对生成的曲线没有任何影响。下面是一个最小的示例，使用beta = 0.0，它应该在两个端点之间产生一条直线：
// create a 300x300 svg element
var w = 300;
var h = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("
浏览 2提问于2017-03-07得票数 3
回答已采纳
我有一个由多个路径元素组成的SVG clipPath，我需要将它应用于一组元素。我只想剪出路径下的区域笔画本身，而不是在路径之间。(例如，这样做不符合我的要求)
var lineData = [ { "x": 1, "y": 5}, { "x": 100, "y": 400},
{ "x": 300, "y": 100}, { "x": 600, "y": 600},
{ "
浏览 0提问于2019-04-24得票数 1
回答已采纳
1回答
带随机着色线的D3路径
、、、
下面的代码使用行生成器函数和在for循环中创建的d3生成随机颜色的dataArray路径。如何使路径中的每一行都有不同的随机颜色？
for (var i = 0; i < 1000; i++) {
x = Math.random()*$(window).width();
y = Math.random()*$(window).height();
rc = d3.rgb( Math.random()*255, Math.random()*255, Math.random()*255 );
dataArray[i] = { x:x, y:y, colo
浏览 0提问于2016-11-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
