无法在d3.js中执行类转换
为什么我不能在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秒后逐渐过渡到一个带有黑色边框的白色圆圈中。但这是不可能的。我正在学习d3.js am 这里，根据教程，我做的一切都是正确的。
这里是小提琴。如能在此提供任何帮助，我将不胜感激。
我知道其他方法，例如，使用css-transitions，但我想感受d3.js的力量，因为我决定深入学习它。
回答 1
Stack Overflow用户
发布于 2018-05-27 14:02:26
简单地说，你是在尝试这样做：
circle.classed("blackCircle",true);
circle.transition()
.classed("blackCircle",false);
.classed("whiteCircle",true);问题是，转换不提供classed方法。如果您查看所获得的错误消息，您可以确认如下：circle.transition(...).classed is not a function。(参见可用方法的文档) d3转换在起始值和结束值之间进行内插-由于布尔值为真或假，很难仅使用这两个值在这两个点之间进行转换。因此，classed不能是当前形式的d3转换的方法。
如果希望使用d3，可以放弃类方法，直接使用selection.style()和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>
我还将补充如下：
circle.attr("class","whiteCircle");
circle.transition().attr("class","blackCircle");尽管.attr()是d3 d3.transition()的一种方法，但它也不能正常工作。这是因为内插器将尝试使用d3.interpolateString在开始和结束之间插入字符串值。给定两个没有数字的字符串，第二个值将在转换的所有点使用(参见这把小提琴)。
另外，您使用背景作为svg循环的css属性，在使用svg元素时需要使用fill。同样，您需要使用笔画、笔画宽度等，而不是边框。
https://stackoverflow.com/questions/50552766
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号