javascript - d3 xScale损坏

我正在将数据分为几类富人穷人。使用下拉菜单将这些值显示在散点图上。发生第一个过渡，一切按预期进行。文本标签正确显示过，然而当另一个选项被选中和第二过渡圈发生了一半的消失和所有其他过渡搞砸。仅在再次选择所有选项时才起作用，第一个过渡起作用，之后所有困惑。

Codepen

function render(someData) {

        xScale
            .domain([
                d3.min(someData, function(d) {
                    return +d.poorToys;
                }),
                d3.max(someData, function(d) {
                    return +d.poorToys;
                })
            ]);

        yScale
            .domain([
                d3.min(someData, function(d) {
                    return +d.richToys;
                }),
                d3.max(someData, function(d) {
                    return +d.richToys;
                })+ 20
            ]);

        //Adding circles
        var circles = svg.selectAll("circle")
            .data(someData, function(d) {
                return d.country;
            });

我相信问题从这里开始。

 circles
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            if (currentSelection === "rich") {
                return width - margin.right;
            } else if (currentSelection === "poor") {
                return margin.left;
            } else if (currentSelection === "all") {}
            return xScale(+d.poorToys);
        })
        .attr("cy", function(d) {
            if (currentSelection === "rich") {
                return margin.top;
            } else if (currentSelection === "poor") {
                return height - margin.bottom;
            } else if (currentSelection === "all") {}
            return yScale(+d.richToys);
        })
        .attr("r", function(d) {
            if (currentSelection === "all") {
                return rad;
            }
        })
        .style("fill", "red")

        .append("title")
        .text(function(d) {
            return d.country + " reports books for " + d.poorToys + "% in poor areas and " + d.richToys + "% in rich areas.";
        });


    circles
        .transition()
        .duration(2000)
        .attr("cx", function(d) {
            return xScale(+d.poorToys);
        })
        .attr("cy", function(d) {
            return yScale(+d.richToys);
        })
        .attr("r", function() {
            if (currentSelection !== "all") {
                return rad * 1.5;
            } else {
                return rad;
            }
        });

    circles
        .exit()
        .transition()
        .duration(1000)
        .style("opacity", 0)
        .remove();

    //Update x axis
    svg.select(".x.axis")
        .transition()
        .duration(1000)
        .call(xAxis);

    //Update y axis
    svg.select(".y.axis")
        .transition()
        .duration(1000)
        .call(yAxis);


    if (currentSelection !== "all"){

        var labels = svg.selectAll("text.labels")
            .data(someData, function(d){
                return d.country;
            });

        labels
            .enter()
            .append("text")
            .attr("transform", function(d){
                return "translate(" + xScale(+d.poorToys) + "," + yScale(+d.richToys) + ")";
            })
            .attr("dx", 2)
            .attr("dy", 1)
            .attr("class", "labels")
            .style("fill", "white")
            .style("font-size", "5px")
            .text(function(d){
                return d.country;
            });

        labels
            .transition()
            .duration(2000)
            .style("opacity", 1);


       labels
        .exit()
        .remove();

        } else {
                svg.selectAll("text.labels")
                    .transition()
                    .duration(1000)
                    .style("opacity", 0)
                    .remove();


    }

}

最佳答案

您在第57行中错误地给x轴提供了x_axis类，然后稍后在第179行中的渲染函数中尝试将其选择为x.axis。

解决问题后，我认为它应该可以正常工作。

svg
  .append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(" + -14 + "," + (height + 30) + ")")
  .call(xAxis);

Updated Pen

关于javascript - d3 xScale损坏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53553025/