Question

我刚刚在d3.js中创建了我的第一个测试程序。到目前为止它工作正常。它创建rects以说明从.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();

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

 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的代码snippits和刷新按钮内容无效。

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的评论中所述，您应该使用enter / update / exit模式。但是要回答你的问题，你要清除svg（svg下的所有内容）的内容：

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

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

Answer 2

添加此函数并在调用控件时调用它修复了该问题。图表被重置并完全重绘。如果图表是动画的并且每当做出新的选择时条形移动都会很好，但这已经足够了：

function resetchart()
{
    d3.select("svg").remove();
    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 + ")");
}

如何在javascript

2 个答案: