d3 xScale 坏了答案

【问题标题】：d3 xScale is brokend3 xScale 坏了
【发布时间】：2019-05-02 08:13:55
【问题描述】：

我将数据划分为多个类别，例如富人和穷人。使用下拉列表将这些值显示在散点图上。第一次过渡发生，一切都按预期进行。 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.只有在选项所有 em>的选项，首先转换工作，之后它一切都搞砸了。

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


    }   

}

【问题讨论】：

圆的定位为什么要用currentSelection？为什么要将数字转换为数字+d.richToys？
请edit您的问题标题更能描述您的问题。 “x 已损坏”很少有人会搜索并找到您的确切问题。

标签： javascript json d3.js css-transitions

【解决方案1】：

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

【讨论】：

非常感谢！非常感谢。

【解决方案2】：

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

一旦你解决了这个问题，我认为它应该可以按预期工作。

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

Updated Pen

【讨论】：

是x_axis 不是a_axis