d3的x轴比例尺失效了

Question

我正在将数据分成类别，例如 富人、穷人和所有人。使用下拉列表获取这些值以在散点图上显示。第一个过渡发生时，一切都按预期工作。文本标签也正确显示，但是当选择另一个选项并且第二个过渡发生时，一半的圆圈消失了，每次过渡都会出现问题。只有选项全部才能正常工作，然后再次选择，第一个过渡就可以正常工作，之后则都出现问题。 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();


    }   

}

- Edgar Kiljak

---

为什么在圆圈的定位中使用 currentSelection？为什么要将数字转换为数字 +d.richToys？ - rioV8

请修改您的问题标题，使其更能描述您的问题。"x已损坏"很少有人会搜索并找到您确切的问题。 - Heretic Monkey

Answer 1

你在第57行错误地给x轴一个类名为x_axis，然后在第179行的渲染函数中尝试将其选择为x.axis。

一旦你修复了这个问题，我认为它应该按预期工作。

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

已更新的笔

- ksav

---

它是 x_axis 而不是 a_axis。 - rioV8

Answer 2

除了@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.";
    });

- rioV8

---

非常感谢！非常感激。 - Edgar Kiljak