d3 xScale 坏了

Question

我将数据分成几类，例如穷人和所有人。使用下拉菜单让这些值显示在散点图上。第一次转换发生，一切都按预期进行。 Text labels are correctly displayed too, however when another option is selected and second transition happened half of circles are disappearing and every other transition is messed up. Only works if option all selected than again, first transition works, after that it is all messed up.

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 行错误地将 class 设为 x_axis，然后在第 179 行的渲染函数中尝试将其 select 作为 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.";
    });

d3 xScale 坏了

d3 xScale is broken

javascript

json

css-transitions

d3.js