代码之家 › 专栏 › 技术社区 › manymanymore

无法在d3.js中执行类转换

d3.js javascript

manymanymore · 技术社区 · 6 年前

为什么我不能在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 结束 here 根据教程,我做的每件事都是正确的。

Here 就是小提琴。如有任何帮助,我们将不胜感激。

我知道其他方法,例如,使用 css-transitions 但是我想感受一下 D3.JS 因为我决定深入学习。

1 回复 | 直到 6 年前

Andrew Reid 6 年前

简单地说,您尝试这样做:

circle.classed("blackCircle",true);

circle.transition()
  .classed("blackCircle",false);
  .classed("whiteCircle",true);

问题是,过渡不提供 classed 方法。如果查看收到的错误消息,可以确认: circle.transition(...).classed is not a function . the docs for available methods ) d3转换在起始值和结束值之间插入-作为布尔值,要么为真,要么为假,仅使用这两个值很难在这两个点之间转换。因此, 分类 不能是当前形式的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.transition()的一个方法,但它也不能工作。这是因为插值器将尝试使用 d3.interpolateString . 给定两个没有数字的字符串,第二个值将在转换的所有点上使用(请参见 this fiddle )

此外,还可以将background用作SVG循环的CSS属性,使用SVG元素时需要使用fill。同样,您需要使用笔划、笔划宽度等来代替边框。