D3.js-尝试在单击按钮并填充新图表时删除折线图

Question

我正在尝试使用3个不同的按钮来构建折线图，以显示3种不同的指标-事件，死亡人数和伤害。页面加载后，我的第一个折线图工作正常（突发事件）；然而。当我单击“死亡人数”按钮（和/或“伤害”按钮）时，我的坐标轴消失，剩下的只有文字。我尝试调整clear（）函数，因为我很确定这是问题所在，但是我无法弄清楚。任何帮助将不胜感激。

这是我的html：

<div id="svgContainer">

<div id="svgLines">
<div id="svg"></div>       
<div id="svg2"></div>
<div id="svg3"></div>
</div>

<div class="btn-group3" data-toggle="buttons">
<label id="incidentsButton1" class="btn btn-default active"><input 
type="radio" class="btn-options"> Incidents </label>
<label id="fatalitiesButton1" class="btn btn-default"><input 
type="radio" class="btn-options"> Fatalities </label>
<label id="injuriesButton1" class="btn btn-default"><input type="radio" 
class="btn-options"> Injuries </label>
</div>

</div>

这是我的JavaScript。为了简单起见，我将只对第一个折线图使用该函数，因为其他两个相同（只是使用不同的数据）

function totalIncidentsLineGraph() {

modus = "incidents"; 


var margin = {top: 80, right: 80, bottom: 80, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom; 

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

var incidentsData = svg.append("g"); 

incidentsData.selectAll(".incidentsData")
            .data(incidentData)
            .enter()
            .append('incidentsData')
            .attr('class', 'incidentsData')
            .attr('id', function(d) { return d.country, d.date, 
            d.incidents});

d3.select(".legendLine").style("visibility", "visible"); 

var parse = d3.time.format("%Y").parse; 

var x = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
xAxis = d3.svg.axis().scale(x).tickSize(-height).tickSubdivide(true),
yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

// An area generator, for the light fill.
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.incidents); }); 

// A line generator, for the dark stroke.
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.incidents); });

var colors = d3.scale.category10();

function type(d) {
d.country = d.country;
d.date = parse(d.date);
d.incidents = +d.incidents
return d;
};

var data = d3.csv("static/data/israel/incidents_linechart.csv", type, 
function(error, data) {
console.log(data);

var israel = data.filter(function(d) {
return d.country == "Israel";
});

var unitedStates = data.filter(function(d) {
return d.country == "United States";
});

var iran = data.filter(function(d) {
return d.country == "Iran";
});

var saudiArabia = data.filter(function(d) {
return d.country == "Saudi Arabia";
});

var turkey = data.filter(function(d) {
return d.country == "Turkey";
});

var egypt = data.filter(function(d) {
return d.country == "Egypt";
});

var syria = data.filter(function(d) {
return d.country == "Syria";
});

var lebanon = data.filter(function(d) {
return d.country == "Lebanon";
});

var jordan = data.filter(function(d) {
return d.country == "Jordan";
});

var palestine = data.filter(function(d) {
return d.country == "Palestine";
});

 x.domain([unitedStates[0].date, unitedStates[unitedStates.length - 
 1].date]);
 y.domain([0, d3.max(egypt, function(d) { return d.incidents; 
 })]).nice();

svg.append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

// Add the x-axis.
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

// Add the y-axis.
svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + width + ",0)")
  .call(yAxis);

// Title
svg.append("text")
      .attr("id", "titleLine")
      .attr("y", -50)
      .attr("x", 275)
      .attr("dy", ".35em")
      .style("font-size", "14px")
      .text("Total Incidents Amongst Countries: 1970 - 2017"); 

 svg.selectAll('.line')
.data([israel, unitedStates, iran, saudiArabia, turkey, egypt, syria, 
lebanon, jordan, palestine]) 
.enter()
  .append('path')
    .attr('class', 'line')
    .style('stroke', function(d) {
      return colors(Math.random() * 50);
    })
    .attr('clip-path', 'url(#clip)')
    .attr('d', function(d) {
      return line(d);
    })
  .on("mouseover", showOne)
  .on("mouseout", showAll); 

 var curtain = svg.append('rect')
.attr('x', -1 * width)
.attr('y', -1 * height)
.attr('height', height)
.attr('width', width)
.attr('class', 'curtain')
.attr('transform', 'rotate(180)')
.style('fill', '#ffffff')

var guideline = svg.append('line')
.attr('stroke', '#333')
.attr('stroke-width', 0)
.attr('class', 'guide')
.attr('x1', 1)
.attr('y1', 1)
.attr('x2', 1)
.attr('y2', height)


var t = svg.transition()
.delay(750)
.duration(6000)
.ease('linear')
.each('end', function() {
  d3.select('line.guide')
    .transition()
    .style('opacity', 0)
    .remove()
 });

t.select('rect.curtain')
.attr('width', 0);
t.select('line.guide')
.attr('transform', 'translate(' + width + ', 0)')

d3.select("#show_guideline").on("change", function(e) {
guideline.attr('stroke-width', this.checked ? 1 : 0);
curtain.attr("opacity", this.checked ? 0.75 : 1);
})

});

}; 

这是我的明确功能。我不得不注释掉第一个，因为在其他容器元素中我有多个SVG与该图无关，并且当我尝试其他所有容器元素都消失了时。

function clear() {
  //d3.selectAll("svg > *").remove();
  d3.select("#svg > *").remove();
  d3.select("#svg2 > *").remove();
  d3.select("#svg3 > *").remove();

 };

这是我的按钮：

 d3.select("#incidentsButton1")      
.on("click", function(e){
clear();
totalIncidentsLineGraph();
 });

d3.select("#fatalitiesButton1")      
.on("click", function(e){
clear();
totalFatalitiesLineGraph();
});

d3.select("#injuriesButton1")      
.on("click", function(e){
clear();
totalInjuriesLineGraph();
});

任何帮助将不胜感激