Question

我正在D3数据可视化上工作，我试图使我的第一个条形图消失，然后让一个新的条形图恰好出现在最后一个条形图的位置。我的问题是第二个正叠加在第一个之上，因此一切都变得混乱了。任何帮助将不胜感激。

这是我的代码：

    var data = [{

            "name": "text",
            "value": 2,
    },
        {
            "name": "text",
            "value": 44,
    },
        {
            "name": "text",
            "value": 20,
    },
        {
            "name": "text",
            "value": 18,
    },
        {
            "name": "text",
            "value": 12,
    },
        {
            "name": "text",
            "value": 9,
    },
        {
            "name": "text",
            "value": 7,
    },
        {
            "name": "text",
            "value": 6,
    },
        {
            "name": "text",
            "value": 5,
    },
        {
            "name": "text",
            "value": 4,
    },


    ];

        var margin = {
        top: 15,
        right: 35,
        bottom: 15,
        left: 115
    };

    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;


    //var startBar2010 = 
    startBarChart.append("g").attr("class","bar2010");


    var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        //.attr("align","center")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + 
    margin.top + ")"); 
        //.attr("transform", "translate(" + 200 + "," + (-500) + ")"); 

    var x = d3.scale.linear()
        .range([0, width])
        .domain([0, d3.max(data, function (d) {
            return d.value;
        })]);

    var y = d3.scale.ordinal()
        .rangeRoundBands([height, 0], .1)
        .domain(data.map(function (d) {
            return d.name;
        }));

    //make y axis to show bar names
    var yAxis = d3.svg.axis()
        .scale(y)
        //no tick marks
        .tickSize(0)
        .orient("left");

    var gy = svg.append("g")
        .attr("class", "y axis")
        .transition().delay(delay*1).ease(d3.easeLinear).duration(1000)
        .call(yAxis);

    var bars = svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("g");

    //append rects
    bars.append("rect")
        .attr("class", "bar")
        .attr("x",  -500)
        .attr("y",  -25)
        .attr("width", 0)
        .attr("height", 35)
        .transition().delay(delay*1).ease(d3.easeLinear).duration(1000)
        //.transition().delay(delay*1).duration(2500) 
        .attr("y", function (d) {
            return y(d.name);
        })
        .attr("height", y.rangeBand())
        .attr("x", 0)
        .attr("width", function (d) {
            return x(d.value); 
        })
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Do I Work ?");

        bars.append("text")
        .attr("class", "label")
        .attr("y", -42)
        .attr("x", -520)
        .transition().delay(delay*1).ease(d3.easeLinear).duration(1000)
        //y position of the label is halfway down the bar
        .attr("y", function (d) {
            return y(d.name) + y.rangeBand() / 2 + 4;
        })
        //x position is 3 pixels to the right of the bar
        .attr("x", function (d) {
            return x(d.value) + 3;
        })
        .text(function (d) {
            return d.value;

        });

我认为以下代码将清除后续条形图的所有内容

    bars.selectAll("g")
    //.transition().delay(delay*3).duration(1000)
    .transition().delay(delay*1.7).duration(1000) 
    .style("opacity",0)
    .call(endall, function() {
        bars.selectAll("g")
            .remove();
    });

这是第二个条形图数据和图表：

var dataTwo = [{

            "name": "text",
            "value": 2,
    },
        {
            "name": "text",
            "value": 44,
    },
        {
            "name": "text",
            "value": 20,
    },
        {
            "name": "text",
            "value": 18,
    },
        {
            "name": "text",
            "value": 12,
    },
        {
            "name": "text",
            "value": 9,
    },
        {
            "name": "text",
            "value": 7,
    },
        {
            "name": "text",
            "value": 6,
    },
        {
            "name": "text",
            "value": 5,
    },
        {
            "name": "text",
            "value": 4,
    },


    ];


    var margin = {
        top: 15,
        right: 35,
        bottom: 15,
        left: 115
    };

    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    //var startBar2010 = 
    startBarChart.append("g").attr("class","bar2010");

    var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        //.attr("align","center")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + 
        margin.top + ")"); 
        //.attr("transform", "translate(" + 200 + "," + (-500) + ")"); 

    var x = d3.scale.linear()
        .range([0, width])
        .domain([0, d3.max(dataTwo, function (d) {
            return d.value;
        })]);

    var y = d3.scale.ordinal()
        .rangeRoundBands([height, 0], .1)
        .domain(dataTwo.map(function (d) {
            return d.name;
        }));

    //make y axis to show bar names
    var yAxis = d3.svg.axis()
        .scale(y)
        //no tick marks
        .tickSize(0)
        .orient("left");

    var gy = svg.append("g")
        .attr("class", "y axis")

    .transition().delay(delay*2.1).ease(d3.easeLinear).duration(1000)
        .call(yAxis); 

    // Update with new values

    var bars = svg.selectAll(".bar")
        .data(dataTwo) 
        .enter()
        .append("g"); 

    //append rects
    bars.append("rect")
        .attr("class", "bar")
        .attr("x",  -500)
        .attr("y",  -25)
        .attr("width", 0)
        .attr("height", 35)

      .transition().delay(delay*2.1).ease(d3.easeLinear).duration(1000)
        //.transition().delay(delay*1).duration(2500)
        //.selection().delay(delay*1).duration(2500) 
        .attr("y", function (d) {
            return y(d.name)
        })
        .attr("height", y.rangeBand())
        .attr("x", 0)
        .attr("width", function (d) {
            return x(d.value)
        });

        bars.append("text")
        .attr("class", "label")
        .attr("y", -42)
        .attr("x", -520)

    .transition().delay(delay*2.1).ease(d3.easeLinear).duration(1000)
        //y position of the label is halfway down the bar
        .attr("y", function (d) {
            return y(d.name) + y.rangeBand() / 2 + 4;
        })
        //x position is 3 pixels to the right of the bar
        .attr("x", function (d) {
            return x(d.value) + 3;
        })
        .text(function (d) {
            return d.value;

        });

Answer 1

就像在D3.js中使用enter().append()的组合来创建DOM元素以反映DOM中尚不存在的数据集元素一样，同样使用exit().remove()组合来删除那些DOM元素。

那么，您要做的就是让一个DOM元素充当容器，您将其用作D3操作的根。通常，我们有一个div，要向其中添加图表的SVG-但是您应该知道这是哪个元素，无论是body，div还是其他元素。您添加到该容器中的所有内容都应通过2个步骤删除：

按如下所述实施exit().remove()。
清除当前绑定到该组元素的整个数据集。

这是a useful description。 Mike Bostock（D3.js的作者）has a diagram明确说明了enter，exit和update的含义；这里的“元素”表示“ DOM元素”，而“数据”表示“数据数组元素”：

试图使条形图消失，然后再次出现

1 个答案: