Javascript 我能'；t使用转换更新/设置我的d3v5散点图动画

如图1所示，我有一个带有组元素的散点图，它由两部分组成：一个圆圈和其中的文本

图1：我的散点图

我面临的问题是，当我试图用新的更新值来设置图表的动画时。下面的代码描述了我用来创建圆并向其中添加文本的group元素

            var circlegrp = svg.append("g");

            var dot = circlegrp.append("g")
                .attr("class", "dots")
                .selectAll(".dot")
                .data(interpolateData(1800))
                .enter().append("circle")
                .attr("class", "dot")
                .style("fill", function (d) { return colorScale(color(d)); })
                .call(position);

            function position(dot) {
                dot.attr("cx", function (d) { return xScale(x(d)); })
                    .attr("cy", function (d) { return yScale(y(d)); })
                    .attr("r", 15)
                    .style("stroke", "black")
            }

            circlegrp.selectAll("dots")
                .data(interpolateData(1800))
                .enter().append("text")
                .attr("x", function (d) { return xScale((x(d))); })
                .attr("y", function (d) { return yScale(y(d)); })
                .text(function (d) { return countryCode(d); })
                .attr('dy', 3)
                .style("font-family", "Verdana")
                .style("text-transform", "uppercase")
                .style("font-size", "11px")
                .style("font-color", "green")
                .style("font-weight", "600")
                .style("font-style", "italic")
                .style('text-anchor', 'middle')
                .style('alignment-baseline', 'middle');

使用的interpolateData和InterpolateValue函数如下所示：

        function interpolateData(year) {
            return data.map(function (d) {
                return {
                    name: d.name,
                    region: d.region,
                    code: d.code,
                    income: interpolateValues(d.income, year),
                    lifeExpectancy: interpolateValues(d.lifeExpectancy, year),
                    childrenPerWoman: interpolateValues(d.childrenPerWoman, year),
                    population: interpolateValues(d.population, year)
                };
            });
         }

        function interpolateValues(values, year) {
            if (values.length == 0) {
                return -999.12345;
            }
            for (i = 0; i < values.length; i++) {
                if (values[i][0] == year) {
                    return values[i][1]
                }
                else if (i === values.length - 1) {
                    return -999.12345;
                }
            }

根据我的理解，我选择了有圆圈和文本的小组，并在其上进行了转换。这里有什么我看不到的错误吗？从我收集到的信息来看，我认为下面的代码片段对我来说是可行的

            circlegrp.selectAll()
                     .transition()
                     .duration(30000)
                     .tween("year", tweenYear);
            function tweenYear() {
                var year = d3.interpolateNumber(1800, 2020);
                return function (t) { displayYear(year(t)); };
            }

            // Updates the display to show the specified year.
            function displayYear(year) {
                dot.data(interpolateData(year), key).call(position);
            }

---

year

不是有效的属性。改用

attr.cx

和

attr.cy

。您甚至可以将年份逻辑与此解耦，例如，使用滑块。然后每2秒增加一次年份，然后再进行一次线性过渡，也需要2秒：

const width=600，
高度=300；
常量数据={}；
d3.范围（20.forEach）（i=>{
数据[2000+i]=i**2；
});
常数x=d3.scaleLinear（）
.域名（[20002019]）
.范围（[0，宽度]）；
常数y=d3.scaleLinear（）
.domain（[0361]）
.范围（[高度，0]）；
常量圆=d3。选择（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“圆圈”）
.基准（数据）
.attr（'r'，10）
.attr（“cx”，x（2000））
.attr（“cy”，d=>y（d[2000]）；
常量滑块=d3。选择（“输入”）
.on（“更改”，函数（）{
console.log（this.value）；
过渡（+该值为500）；
});
职能转变（年份、期限）{
返回圈
.transition（）
.持续时间（持续时间）
.ease（d3.easeLinear）
.attr（“cx”，x（年））
.attr（“cy”，d=>y（d[年]）；
}
功能遍历（年、持续时间）{
如果（年份>x.domain（）[1]）{
返回；
}
过渡期（年、期限）。在（“结束”时，（）=>{
slider.attr（“值”，函数（）{
返回（+this.value）+1；
});
导线测量（年+1，持续时间）；
});
}
导线测量（2000500）


            circlegrp.selectAll()
                     .transition()
                     .duration(30000)
                     .tween("year", tweenYear);
            function tweenYear() {
                var year = d3.interpolateNumber(1800, 2020);
                return function (t) { displayYear(year(t)); };
            }

            // Updates the display to show the specified year.
            function displayYear(year) {
                dot.data(interpolateData(year), key).call(position);
            }