javascript - 制作 D3 Pie v4 示例 - 在初始渲染时设置动画-6ren

javascript - 制作 D3 Pie v4 示例 - 在初始渲染时设置动画

转载作者：行者123 更新时间：2023-11-30 20:47:19

我的工作起点是:http://bl.ocks.org/dbuezas/9306799我无法弄清楚的一件事是为什么它一开始没有动画。我可以做一个简单的改变来使这个动画最初吗？

通常我将属性设置为零，但我不知道如何让 attrTween 开始动画。

有什么建议吗？

如果方便的话添加为一个片段..

var svg = d3.select("body")
	.append("svg")
	.append("g")

svg.append("g")
	.attr("class", "slices");
svg.append("g")
	.attr("class", "labels");
svg.append("g")
	.attr("class", "lines");

var width = 500,
    height = 200,
	radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) {
		return d.value;
	});

var arc = d3.svg.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(radius * 0.4);

var outerArc = d3.svg.arc()
	.innerRadius(radius * 0.9)
	.outerRadius(radius * 0.9);

svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var key = function(d){ return d.data.label; };

var color = d3.scale.ordinal()
	.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

function randomData (){
	var labels = color.domain();
	return labels.map(function(label){
		return { label: label, value: Math.random() }
	});
}

change(randomData());

d3.select(".randomize")
	.on("click", function(){
		change(randomData());
	});


function change(data) {

	/* ------- PIE SLICES -------*/
	var slice = svg.select(".slices").selectAll("path.slice")
		.data(pie(data), key);

	slice.enter()
		.insert("path")
		.style("fill", function(d) { return color(d.data.label); })
		.attr("class", "slice");

	slice		
		.transition().duration(1000)
		.attrTween("d", function(d) {
			this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				return arc(interpolate(t));
			};
		})

	slice.exit()
		.remove();

	/* ------- TEXT LABELS -------*/

	var text = svg.select(".labels").selectAll("text")
		.data(pie(data), key);

	text.enter()
		.append("text")
		.attr("dy", ".35em")
		.text(function(d) {
			return d.data.label;
		});
	
	function midAngle(d){
		return d.startAngle + (d.endAngle - d.startAngle)/2;
	}

	text.transition().duration(1000)
		.attrTween("transform", function(d) {
			this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				var d2 = interpolate(t);
				var pos = outerArc.centroid(d2);
				pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
				return "translate("+ pos +")";
			};
		})
		.styleTween("text-anchor", function(d){
			this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				var d2 = interpolate(t);
				return midAngle(d2) < Math.PI ? "start":"end";
			};
		});

	text.exit()
		.remove();

	/* ------- SLICE TO TEXT POLYLINES -------*/

	var polyline = svg.select(".lines").selectAll("polyline")
		.data(pie(data), key);
	
	polyline.enter()
		.append("polyline");

	polyline.transition().duration(1000)
		.attrTween("points", function(d){
			this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				var d2 = interpolate(t);
				var pos = outerArc.centroid(d2);
				pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
				return [arc.centroid(d2), outerArc.centroid(d2), pos];
			};			
		});
	
	polyline.exit()
		.remove();
};

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 400px;
  height: 400px;
  position: relative;
}

svg {
	width: 100%;
	height: 100%;
}

path.slice{
	stroke-width:2px;
}

polyline{
	opacity: .3;
	stroke: black;
	stroke-width: 2px;
	fill: none;
}

<!DOCTYPE html>
<meta charset="utf-8">

</style>
<body>
<button class="randomize">randomize</button>

<script src="http://d3js.org/d3.v3.min.js"></script>

</body>

最佳答案

问题是您需要为楔形设置与其最终状态不同的初始状态，以便查看过渡。

在图表的初始加载时，检查是否定义了 this._current，如果没有，则为其分配一些初始数据:

  if(!this._current) this._current = startSlice; // assign initial data
  else this._current = this._current || d;       // otherwise, continue as before.

startSlice 可能看起来像:

var startSlice = {
 startAngle: 0,
 endAngle: 0,
 padAngle:0,
 value:0,
 data: {lable:"",value:0}
}

或者您需要它来满足您的需要。我只更新了下面动画中的楔形部分:

var svg = d3.select("body")
	.append("svg")
	.append("g")

svg.append("g")
	.attr("class", "slices");
svg.append("g")
	.attr("class", "labels");
svg.append("g")
	.attr("class", "lines");

var width = 500,
    height = 200,
	radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) {
		return d.value;
	});

var arc = d3.svg.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(radius * 0.4);

var outerArc = d3.svg.arc()
	.innerRadius(radius * 0.9)
	.outerRadius(radius * 0.9);

svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var key = function(d){ return d.data.label; };

var color = d3.scale.ordinal()
	.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

function randomData (){
	var labels = color.domain();
	return labels.map(function(label){
		return { label: label, value: Math.random() }
	});
}

change(randomData());

d3.select(".randomize")
	.on("click", function(){
		change(randomData());
	});


function change(data) {

	/* ------- PIE SLICES -------*/
  
  var startSlice = {
     startAngle: 0,
     endAngle: 0,
     padAngle:0,
     value:0,
     data: {lable:"",value:0}
  }

  var slice = svg.select(".slices").selectAll("path.slice")
		.data(pie(data), key);

	slice.enter()
		.insert("path")
		.style("fill", function(d) { return color(d.data.label); })
		.attr("class", "slice");

	slice		
		.transition().duration(1000)
		.attrTween("d", function(d) {
			if(!this._current) this._current = startSlice;
      else this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				return arc(interpolate(t));
			};
		})

	slice.exit()
		.remove();

	/* ------- TEXT LABELS -------*/

	var text = svg.select(".labels").selectAll("text")
		.data(pie(data), key);

	text.enter()
		.append("text")
		.attr("dy", ".35em")
		.text(function(d) {
			return d.data.label;
		});
	
	function midAngle(d){
		return d.startAngle + (d.endAngle - d.startAngle)/2;
	}

	text.transition().duration(1000)
		.attrTween("transform", function(d) {
			this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				var d2 = interpolate(t);
				var pos = outerArc.centroid(d2);
				pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
				return "translate("+ pos +")";
			};
		})
		.styleTween("text-anchor", function(d){
			this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				var d2 = interpolate(t);
				return midAngle(d2) < Math.PI ? "start":"end";
			};
		});

	text.exit()
		.remove();

	/* ------- SLICE TO TEXT POLYLINES -------*/

	var polyline = svg.select(".lines").selectAll("polyline")
		.data(pie(data), key);
	
	polyline.enter()
		.append("polyline");

	polyline.transition().duration(1000)
		.attrTween("points", function(d){
			this._current = this._current || d;
			var interpolate = d3.interpolate(this._current, d);
			this._current = interpolate(0);
			return function(t) {
				var d2 = interpolate(t);
				var pos = outerArc.centroid(d2);
				pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
				return [arc.centroid(d2), outerArc.centroid(d2), pos];
			};			
		});
	
	polyline.exit()
		.remove();
};

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 400px;
  height: 400px;
  position: relative;
}

svg {
	width: 100%;
	height: 100%;
}

path.slice{
	stroke-width:2px;
}

polyline{
	opacity: .3;
	stroke: black;
	stroke-width: 2px;
	fill: none;
}

<!DOCTYPE html>
<meta charset="utf-8">

</style>
<body>
<button class="randomize">randomize</button>

<script src="http://d3js.org/d3.v3.min.js"></script>

</body>

关于javascript - 制作 D3 Pie v4 示例 - 在初始渲染时设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48567446/

文章推荐： c - printf 不工作和其他问题

文章推荐： c# - 混淆 EventWaitHandle 的名称

文章推荐： c - 为什么 malloc 会在这里引发内存损坏？

文章推荐： javascript - 触发 takeUntil 操作时执行函数

dyld - PIE 禁用。代码签名的 PIE 中不允许使用绝对寻址
我正在使用 Xcode 4.5，部署目标为 iOS 5.1 当我编译我的应用程序时，我收到以下警告，这些方法与两个大小显着增加的特定方法有关。 ld: warning: PIE disabled. A
c - 是否可以在没有源代码的情况下将 no-pie 可执行文件转换为 pie 可执行文件？
我想使用 lief 将可执行文件转换为共享库，我注意到它只支持 pie 可执行文件。所以我想知道是否有一种方法可以将 no-pie 可执行文件转换为 pie 可执行文件。最佳答案不，没有，除非在链
android - 在 Android Studio 3.0 中构建 PIE 和非 PIE 可执行文件
我的 Android 项目应该生成原生可执行文件作为构建的一部分，并支持 API 14 (Android 4.0) 的所有设备。问题是 4.0 仅支持非 pie 可执行文件，而 Android >
android-9.0-pie - env(safe-area-inset-top) 不适用于 Android Pie + WebView 69
我有一个全屏cordova应用程序，我曾经使用下面的css作为iPhone X的缺口， padding-top: 25px; padding-top: env(safe-area-inset-top)
pie-chart - 百度隐藏echart饼图中标签
我指的是这个https://ecomfe.github.io/echarts/doc/example/pie1.html#-en例子。我无法隐藏饼图中的相邻标签。我已经圈出了我希望隐藏在附加图像中的标
pie-chart - 如何在nvd3饼图中制作工具提示标签整数
这是我的代码: function graphDataAllChart(graphData) { $(".dataContentAllPie").empty(); nv.addGrap
perl 查询使用 -pie
这有效: perl -pi -e 's/abc/cba/g' hellofile 但这不会: perl -pie 's/cba/abc/g' hellofile 换句话说 -pi -e 有效但 -pi
javascript - PIE 切片的颜色不是唯一的
在 amcharts v4 中，PIE 切片的颜色在 10 种左右的颜色后重复。就像他们有一系列颜色，他们只使用这些颜色并在完成后重复。我希望所有切片都具有独特的颜色，而无需手动创建颜色。如果可能需要
ios - 倒数计时器的圆形进度条/PIE
我在我的应用程序中有一个 15 秒计时器的要求，在圆形进度条动画中将在秒数的中心包含标签下面的代码给出了从 0.0 到 1.0f 的 labelprogress，但我想将它映射到 15 秒倒计时的平
Android Pie - 隔夜服务一直被杀死
我有一个在夜间运行后台服务的应用程序。它由 alarm clock app 触发运行. 该应用整夜将手机外部 SD 卡上的数据上传到 Dropbox。它可以在以前的 Android 版本上无缝运行，但
Javascript Pie Ch
我正在尝试从这里自定义一个饼图: https://canvasjs.com/jquery-charts/pie-chart-index-data-label-inside/ 我使用的代码如下，经过我的
css PIE 只是不工作
我正在尝试使用 CSS PIE 显示圆 Angular ，但它不起作用。请看my website for reference .您会看到在 IE7 和 IE8 中，顶部的小登录区域没有圆 Angula
CSS3 Pie 偶尔工作
我正致力于将我们公司的 Web 应用程序带入 21 世纪，并尝试使用一些新的 CSS3 功能，如 border-radius 和 box-shadow 以获得更现代的视觉效果。然而，我们 90% 以上
html - 在悬停边框上添加了 PIE
有一个简单的例子:http://fsou1.ru/files/verstka_examples/14/index2.html 我在 IE 中使用 PIE.js 附加边框半径，但是当我在悬停事件上添加“
CSS3 PIE 调用不工作
我有一个网站 here ... 在 Chrome/FF 中查看它，您会看到带有圆 Angular 的标签。 IE8 仍然显示方 Angular 。这是我调用 PIE 的 CSS... .class-
CSS PIE - 边界问题？
渲染边框的 RGBA 颜色时遇到问题。边框半径的 RGBA 颜色工作正常但不是边框颜色，它不显示任何边框颜色。 CSSPie 中是否有单独的“-pie-”标签用于在边框中使用 RGBA？我的代码:
c - PIE 文件在链接期间是否给出了虚拟内存地址？
我用 gcc -fpie test.c 编译了一个简单的 hello world c 代码，现在使用 objdump 查看二进制文件: Disassembly of section __TEXT,__
CSS3 Pie 背景图片不显示
我正在使用 CSS3 pie 并在 head 标签之前通过附加的 js 文件调用它。出于某种原因，我的背景图片出现了。我已经尝试了标准添加 z-index 和位置相对修复，但它没有显示。任何帮助指导
python - 实时更新matplotlib Pie
这是我检测和显示性别和年龄的循环。我试图在 matplotlib 饼图上绘制它，但每次它运行循环时，它都会为每个预测打开一个不同的图表。如何实时更新同一个图表。这里我更新完整的代码使用 Pytho
css pie 仅适用于字段元素
我用的是ie8，其他版本不知道。我到处都在使用派，它通常工作正常。但是，我所有的表单输入元素都有框阴影和边框半径，并且没有边框(几乎所有样式)。在 FF/Safari/Chrome 中一切都很好，但在

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 制作 D3 Pie v4 示例 - 在初始渲染时设置动画