javascript - 你如何在 javascript 中清除 d3.js 中的 SVG

Question

我刚刚在 d3.js 中创建了我的第一个测试程序。到目前为止它工作正常。它创建矩形来说明它从 .csv 文件中读取的数据，如果用户选择不同的数据，它会加载一个新的数据集。但是它把它写在已经存在的之上，

此代码片段在不清除已有内容的情况下写入新图

    barsM = svg.selectAll(".bar").data(dataMale).enter();


    barsF = svg.selectAll(".bar").data(dataFemale).enter()


    barsM.append("rect")
        .attr("class", "bar1")
        .attr("x", function (d) { return x(d.age_group); })
        .attr("width", x.rangeBand() / 2)
        .attr("y", function (d) { return y(d.mean * 100); })
        .attr("height", function (d, i, j) { return height - y(d.mean *100); });

    barsF.append("rect")
        .attr("class", "bar2")
        .attr("x", function (d) { return x(d.age_group) + x.rangeBand() / 2; })
        .attr("width", x.rangeBand() / 2)
        .attr("y", function (d) { return y(d.mean * 100); })
        .attr("height", function (d, i, j) { return height - y(d.mean * 100); });

您可以在此处查看正在运行的程序

http://www.gelsana.com/IHME/blog/

如何清除图表？我不明白使用数据而不是数据的代码。

我认为这会起作用

svg.selectAll(".bar").data(data).exit().remove();

barsM = svg.selectAll(".bar").data(dataMale).enter();
barsF = svg.selectAll(".bar").data(dataFemale).enter();

或者这个

svg.selectAll(".bar").data(dataMale).exit().remove();                       
svg.selectAll(".bar").data(dataFemale).exit().remove();

barsM = svg.selectAll(".bar").data(dataMale).enter();
barsF = svg.selectAll(".bar").data(dataFemale).enter();

我认为如果有追加，就会有删除。但是盯着这段代码思考如何把正确的代码放在这个 block 之前并没有产生任何结果

 barsM.append("rect")
    .attr("class", "bar1")
    .attr("x", function (d) { return x(d.age_group); })
    .attr("width", x.rangeBand() / 2)
    .attr("y", function (d) { return y(d.mean * 100); })
    .attr("height", function (d, i, j) { return height - y(d.mean *100); });

barsF.append("rect")
    .attr("class", "bar2")
    .attr("x", function (d) { return x(d.age_group) + x.rangeBand() / 2; })
    .attr("width", x.rangeBand() / 2)
    .attr("y", function (d) { return y(d.mean * 100); })
    .attr("height", function (d, i, j) { return height - y(d.mean * 100); });

当我尝试这个的时候

svg.selectAll("*").remove();

它删除了 SVG 并且没有返回。我假设这是因为我在 javascript 中设置了边距和大小，所以使用这个技巧将涉及重写和移动我所有的代码。

这是整个 javascript 文件。请告诉我要改变什么才能使这项工作。代码片段和用于清除 svg 的刷新按钮内容不起作用。

var margin = {top: 20, right: 50, bottom: 100, left: 75},
    width = 740 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear().domain([300, 1100]).range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");

var svg = d3.select("#chart-svg").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("class", "graph")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var _location = "USA";
var _year = "1990";
var _metric = "obese";

function loadCountry(inputcountry)
{
    //d3.selectAll("svg > *").remove();
    _location = inputcountry;
    load();
}

function loadYear(inputyear)
{
    //d3.selectAll("svg > *").remove();
    _year = inputyear;
    load();
}

function loadMetric(inputmetrice)
{

    _metric = inputmetrice;
    load();
}

var headers = [ "Male", "Female"];

function load() {

    d3.csv("../database/IHME_GBD_2013_OBESITY_PREVALENCE_1990_2013_Y2014M10D08.CSV", type, function (error, data)

    {
        var dataMale = data.filter(function (d) {
                 return (d.location == _location) &&
                        (d.year == _year) &&
                        (d.metric == _metric) &&
                        (d.sex_id == 1)
                     });

        var dataFemale = data.filter(function (d) {
                  return (d.location == _location) &&
                       (d.year == _year) &&
                       (d.metric == _metric) &&
                       (d.sex_id == 2)
                      });


        x.domain(data.map(function (d) { return d.age_group; }));
        y.domain([0, d3.max(data, function (d) { return d.mean * 100; })]);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
                    .selectAll("text")
                        .style("text-anchor", "end")
                        .attr("dx", "-.16em")
                        .attr("dy", ".15em")
                        .attr("transform", function(d) {
                            return "rotate(-65)"
                });

        svg.append("g")
            .attr("class", "y axis axisLeft")
            .attr("transform", "translate(0,0)")
            .call(yAxisLeft)
          .append("text")
            .attr("y", 6)
            .attr("dy", "-2em")
            .style("text-anchor", "end")
            .text("Mean");

        svg.selectAll(".bar").data(data).exit().remove();


        barsM = svg.selectAll(".bar").data(dataMale).enter();
        barsF = svg.selectAll(".bar").data(dataFemale).enter();

        barsM.append("rect")
            .attr("class", "bar1")
            .attr("x", function (d) { return x(d.age_group); })
            .attr("width", x.rangeBand() / 2)
            .attr("y", function (d) { return y(d.mean * 100); })
            .attr("height", function (d, i, j) { return height - y(d.mean *100); });

        barsF.append("rect")
            .attr("class", "bar2")
            .attr("x", function (d) { return x(d.age_group) + x.rangeBand() / 2; })
            .attr("width", x.rangeBand() / 2)
            .attr("y", function (d) { return y(d.mean * 100); })
            .attr("height", function (d, i, j) { return height - y(d.mean * 100); });



        var color = d3.scale.ordinal()
            .domain([0, 1])
            .range(["#ff0000", "#0000ff"]);

        var legend = svg.selectAll(".legend")
            .data(headers.slice().reverse())
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function (d, i) { return "translate(-20," + i * 20 + ")"; });

        legend.append("rect")
            .attr("x", width - 18)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", color);

        legend.append("text")
              .attr("x", width - 24)
              .attr("y", 9)
              .attr("dy", ".35em")
              .style("text-anchor", "end")
              .text(function (d) { return d; });


        var tooltip = svg.append("g")
            .attr("class", "tooltip");

        tooltip.append("rect")
            .attr("width", 30)
            .attr("height", 20)
            .attr("fill", "red")
            .style("opacity", 0.5);

        tooltip.append("text")
            .attr("x", 15)
            .attr("dy", "1.2em")
            .style("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("font-weight", "bold");
    });

    function type(d) {
        d.mean = +d.mean;
        return d;
    }
}

编辑:

我尝试了这里提供的解决方案，但没有成功

这是网址

http://www.gelsana.com/IHME/echonax/

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylefile.css">
</head>
<body>

<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="thejsfile.js"></script>
<svg id="graphContainer" class="graphContainer">
  <circle r="10" cx="50" cy="50" ></circle>
</svg>

<button>
remove svg contents
</button>

</body>
</html>

这是javascript文件

var svg = d3.select('svg');
var btn = d3.select('button');


btn.on('click', ()=>{
    svg.selectAll("*").remove();
});

这是css文件

svg{
  height:500px;
  width:500px;
  background: gray;
}
path.link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
}   

circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
}

text {
    font: 10px sans-serif;
    pointer-events: none;
}

text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
}

body {
    background-color: white;
    margin: 0px;
}

.graphContainer {
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

当我在互联网上加载它并点击按钮时，它没有做任何事情。

我认为我的下一步将尝试找到您所说的使用此更新周期的示例代码。正如 PatelGatnan 所说，我想我缺少进入和退出部分

这些添加没有任何作用。重新选择后，程序仍然没有刷新。

Answer 1

如@PavelGatnar 的评论中所述，您应该使用进入/更新/退出模式。但是要回答您的问题，您需要清除 svg 的内容(svg 下的所有内容):

d3.select(".graph").selectAll("*").remove();

示例:https://jsfiddle.net/rqqko9hd/3/