无法在d3.js中执行类转换 [英] Can not perform a class transition in d3.js
问题描述
为什么我不能在d3.js中执行类转换?
Why can not I perform a class transition in d3.js?
main.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d3 playing around</title>
<link rel="stylesheet" href="main.css">
<!-- <script src="d3LibV5Min.js"></script> -->
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div id="drawRegion">
</div>
<script src="main.js"></script>
</body>
</html>
main.css :
#drawRegion {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#drawRegion .mainSvg {
border: 2px #000 solid;
background: #ddd953;
width: 500px;
height: 500px;
}
#drawRegion .mainSvg .blackCircle {
border: 2px #fff solid;
background: #000;
}
#drawRegion .mainSvg .whiteCircle {
border: 2px #000 solid;
background: #fff;
}
main.js :
var drawRegion = d3.select("#drawRegion");
var svg = drawRegion
.append("svg")
.classed("mainSvg", true);
var circle = svg
.append("circle")
.attr("cx", 250)
.attr("cy", 250)
.attr("r", 50)
.classed("blackCircle", true);
var tr = d3
.transition()
.duration(5000);
circle
.transition(tr)
.classed("blackCircle", false)
.classed("whiteCircle", true);
我希望从此代码中执行的操作是显示一个带有白色边框的黑色圆圈，并在5秒钟后逐渐过渡为一个带有黑色边框的白色圆圈.但这只是没有发生.我正在通过此处学习并根据到本教程，我可以正确地完成所有操作.
What I expect from this code to do is to show a black circle with a white border and transition into a white circle with a black border gradually after 5 seconds. But that just does not happen. I am learning the d3.js over here and according to the tutorial I am doing everything correctly.
这里是小提琴.感谢您在此提供的任何帮助.
Here is the fiddle. Will be grateful for any help provided here.
我知道其他方法，例如使用 css-transitions ，但是我想体验 d3.js 的力量，因为我决定学习它深刻地.
I know other approaches like, for example, using the css-transitions, but I would like to feel the power of d3.js since I decided to learn it profoundly.
推荐答案
简而言之，您正在尝试这样做:
Simply put, you are trying to do this:
circle.classed("blackCircle",true);
circle.transition()
.classed("blackCircle",false);
.classed("whiteCircle",true);
问题在于过渡不提供 classed 方法.如果查看收到的错误消息，则可以确认以下内容: circle.transition(...).classed不是函数.(有关可用方法，请参见文档)d3过渡在起始值和结束值之间进行插值-布尔值是true或false时，仅使用这两个值很难在这两个点之间过渡.因此， classed 不能是当前形式的d3过渡方法.
The issue is that a transition doesn't offer a classed method. If you look at the error message you get, you can confirm this: circle.transition(...).classed is not a function.
(See the docs for available methods)
A d3 transition interpolates between a starting value and an end value - and as a boolean value is either true or false, it is hard to transition between these two points using only those two values. Hence, classed cannot be a method of a d3 transition in its current form.
如果您希望将其与d3配合使用，则可以放弃类方法，而直接使用 selection.style()和 transition.style()应用样式.
If you would like this to work with d3, you could abandon the class approach and apply styles directly using selection.style() and transition.style().
例如:
var svg = d3.select("body")
.append("svg");
var circle = svg.append("circle")
.attr("cx",100)
.attr("cy",50)
.attr("r", 20)
.style("fill","steelblue");
var t = d3.transition()
.duration(3000);
circle.transition(t)
.style("fill","orange");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>我还将添加类似的内容:
I'll also add that something like:
circle.attr("class","whiteCircle");
circle.transition().attr("class","blackCircle");
即使.attr()是d3.transition()的一种方法，它也无法正常工作.这是因为插值器将尝试使用 d3.interpolateString .给定两个没有数字的字符串，第二个值将在过渡过程中的所有点使用(请参见此小提琴).
Won't work as well, despite .attr() being a method of d3.transition(). This is because the interpolator will attempt to interpolate the string values between start and end using d3.interpolateString. Given two strings without numbers, the second value will be used at all points on the transition (See this fiddle).
此外，您将background用作svg圆的css属性，使用svg元素时需要使用fill.同样，您需要使用笔触，笔触宽度等代替边框，
这篇关于无法在d3.js中执行类转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
