Javascript D3XScale坏了

我将数据分为不同的类别，如富人、穷人和所有人。使用下拉菜单获取要在散点图上显示的值。第一次转换发生时，一切都按预期进行。文本标签也可以正确显示，但是，当选择另一个选项并且发生第二次转换时，一半的圆将消失，而每一次转换都会出错。只有当再次选择“全部”选项时，第一次转换才有效，之后一切都乱七八糟

我相信问题从这里开始

 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_轴

，然后在第179行的渲染函数中尝试将其选择为

x.axis

一旦你把它修好，我想它应该会像预期的那样工作

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

---

除了@ksav发现的轴问题，您的主要问题是没有定位标签。富人和穷人都有许多标签

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

    labels
      .enter()
      .append("text")
        .attr("x", function(d){ return xScale(+d.poorToys); })
        .attr("y", function(d){ return yScale(+d.richToys); })
        .attr("dx", 2)
        .attr("dy", 1)
        .attr("class", "labels")
        .attr("opacity", 0)
        .style("fill", "white")
        .style("font-size", "8px")
        .text(function(d){ return d.country; })
      .merge(labels)
        .transition()
        .duration(2000)
        .attr("x", function(d){ return xScale(+d.poorToys); })
        .attr("y", function(d){ return yScale(+d.richToys); })
        .attr("opacity", 1);

也不要根据选择来定位圆

circles
    .enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(+d.poorToys); })
    .attr("cy", function(d) { return yScale(+d.richToys); })
    .attr("r", function(d) { 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.";
    });

---

为什么

currentSelection

用于圆的定位？为什么要将数字转换为数字

+d.richToys

？请将您的问题标题改为更能描述您的问题的标题。“x坏了”很少有人会搜索并找到你的确切问题。它是

x_轴

而不是

a_轴

非常感谢！非常感谢。

circles
    .enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(+d.poorToys); })
    .attr("cy", function(d) { return yScale(+d.richToys); })
    .attr("r", function(d) { 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.";
    });