d3 xScale损坏

Question

我正在将数据划分为多个类别，例如穷人和富人。使用下拉菜单将这些值显示在散点图上。发生第一个过渡，一切按预期进行。文本标签也可以正确显示，但是当选择另一个选项并且发生第二次过渡时，半个圆圈消失了，其他所有过渡都弄乱了。仅在再次选择选项 all 时才有效，第一次转换有效，之后一切都搞砸了。

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();


    }   

}

Answer 1

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

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

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

Updated Pen

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