Javascript 用新svg替换当前svg，同时删除旧的DOM元素

我的D3布局基于按钮点击得到动态更新。当我尝试点击按钮更新SVG时，它总是在旧SVG下面创建一个新的SVG

当我点击按钮时，它会继续在旧的SVG下面添加新的SVG

我想要的是它应该替换当前的SVG，并在同一位置创建更新的图表。 我的代码在下面

// JQuery function for two buttons. Based on button click, I am selecting
input file name

$(document).ready(function (){
  $("#link1").click(function(){
    d3.select("#SVG_name").remove();
getData("readme-flare-imports.json");
  });
$("#link2").click(function(){
    d3.select("#SVG_name").remove();
    getData("readme-flare-imports_1.json");
  }
)});


var getData = function(fileName)
{

var diameter = 500,
    radius = diameter / 2,
    innerRadius = radius - 120;

var cluster = d3.layout.cluster()
    .size([360, innerRadius])
    .sort(null)
    .value(function(d) { return d.size; });

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.85)
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });

var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("id","SVG_name")
.attr("transform", "translate(" + radius + "," + radius + ")");

var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])

svg.call(tip);
d3.select(self.frameElement).style("height", diameter + "px");

d3.json(fileName, function(error, classes) {
  var nodes = cluster.nodes(packageHierarchy(classes)),
  links = packageImports(nodes);

  link = link
  .data(bundle(links))
  .enter().append("path")
  .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
  .attr("class", "link")
  .attr("d", line);

  node = node
  .data(nodes.filter(function(n) { return !n.children; }))
.enter().append("text")
  .attr("class", "node")
  .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
  .attr("dy", ".31em")
  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")" + (d.x < 180 ? "" : "rotate(180)"); })
  .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  .text(function(d) { return d.key; })
  .on("mouseover", mouseovered)
  .on("mouseout", mouseouted);
});

   function mouseovered(d) {
  tip.html("<span style='color:red'>" + d.key + "</span>");
  node
      .each(function(n) { n.target = n.source = false; });

  link
  .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
  .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
  .filter(function(l) { return l.target === d || l.source === d; })
  .each(function() { this.parentNode.appendChild(this); });

  node
  .classed("node--target", function(n) { return n.target; })
  .classed("node--source", function(n) { return n.source; })
  .classed("mouseover", tip.show);
}

function mouseouted(d) {
link
  .classed("link--target", false)
  .classed("link--source", false);

node
  .classed("node--target", false)
  .classed("node--source", false)
  .classed("mouseout",tip.hide);
}



// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
 var map = {};

 function find(name, data) {
   var node = map[name], i;
   if (!node) {
  node = map[name] = data || {name: name, children: []};
  if (name.length) {
    node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
    node.parent.children.push(node);
    node.key = name.substring(i + 1);
  }
}
return node;
 }

 classes.forEach(function(d) {
   find(d.name, d);
  });

 return map[""];
}

// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
  var map = {},
  imports = [];

  // Compute a map from name to node.
  nodes.forEach(function(d) {
    map[d.name] = d;
  });

  // For each import, construct a link from the source to target node.
  nodes.forEach(function(d) {
  if (d.imports) d.imports.forEach(function(i) {
  imports.push({source: map[d.name], target: map[i]});
  });
 });

return imports;
}
}

//两个按钮的JQuery函数。根据按钮点击，我选择
输入文件名
$（文档）.ready（函数（）{
$（“#link1”）。单击（函数（）{
d3.选择（“#SVG_名称”）.remove（）；
getData（“readme flare imports.json”）；
});
$（“#link2”）。单击（函数（）{
d3.选择（“#SVG_名称”）.remove（）；
getData（“readme-flare-imports_1.json”）；
}
)});
var getData=函数（文件名）
{
var直径=500，
半径=直径/2，
内半径=半径-120；
var cluster=d3.layout.cluster（）
.尺寸（[360，内半径]）
.sort（空）
.value（函数（d）{返回d.size；}）；
var bundle=d3.layout.bundle（）；
var line=d3.svg.line.radial（）
.插入（“束”）
.张力（.85）
.radius（函数（d）{返回d.y；}）
.angle（函数（d）{返回d.x/180*Math.PI；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“id”、“SVG_名称”）
.attr（“变换”、“平移”（“+radius+”，“+radius+”））；
var link=svg.append（“g”）.selectAll（“link”），
node=svg.append（“g”）.selectAll（“node”）；
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
svg.call（tip）；
d3.选择（self.frameElement）.样式（“高度”，直径+“px”）；
json（文件名、函数（错误、类）{
var nodes=cluster.nodes（packageHierarchy（classes）），
链接=packageImports（节点）；
链接=链接
.数据（捆绑（链接））
.enter（）.append（“路径”）
.each（函数（d）{d.source=d[0]，d.target=d[d.length-1]；}）
.attr（“类”、“链接”）
.attr（“d”，行）；
节点=节点
.data（nodes.filter（函数（n）{return！n.children；}））
.enter（）.append（“文本”）
.attr（“类”、“节点”）
.attr（“dx”，函数（d）{返回d.x<180？8:-8；}）
.attr（“dy”，“.31em”）
.attr（“transform”，函数（d）{return“rotate”（+（d.x-90）+”）“translate”（+d.y+）”）+（d.x<180？”：“rotate（180）”；}）
.style（“文本锚定”，函数（d）{返回d.x<180？“开始”：“结束”}）
.text（函数（d）{return d.key；}）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）；
});
鼠标悬停功能（d）{
html（“+d.key+”）；
节点
.each（函数（n）{n.target=n.source=false；}）；
链接
.classed（“link--target”，函数（l）{if（l.target==d）返回l.source.source=true；}）
.classed（“link--source”，函数（l）{if（l.source==d）返回l.target.target=true；}）
.filter（函数（l）{返回l.target==d | | l.source==d；}）
.each（函数（）{this.parentNode.appendChild（this）；}）；
节点
.classed（“节点--target”，函数（n）{return n.target；}）
.classed（“节点--源”，函数（n）{return n.source；}）
.classed（“鼠标悬停”，提示显示）；
}
功能鼠标移出（d）{
链接
.classed（“链接--目标”，false）
.classed（“链接——来源”，false）；
节点
.classed（“节点--目标”，false）
.classed（“节点--源”，false）
.classed（“mouseout”，tip.hide）；
}
//从类名惰性地构造包层次结构。
函数包层次结构（类）{
var-map={}；
函数查找（名称、数据）{
var node=map[name]，i；
如果（！节点）{
node=map[name]=data | |{name:name，子项：[]}；
如果（名称、长度）{
node.parent=find（name.substring（0，i=name.lastIndexOf（“.”））；
node.parent.children.push（节点）；
node.key=name.substring（i+1）；
}
}
返回节点；
}
类。forEach（函数（d）{
查找（d.name，d）；
});
返回映射[“”]；
}
//返回给定节点数组的导入列表。
函数包导入（节点）{
var-map={}，
进口=[]；
//计算从名称到节点的映射。
nodes.forEach（函数（d）{
map[d.name]=d；
});
//对于每个导入，构造从源节点到目标节点的链接。
nodes.forEach（函数（d）{
if（d.imports）d.imports.forEach（函数（i）{
push（{source:map[d.name]，target:map[i]}）；
});
});
退货进口；
}
}

已更新

<body>
  <div>   
         <button class="btn btn-default ok-button" id="link1"> Link1  </button>
         <button class="btn btn-default ok-button" id="link2"> Link2  </button>
  </div>
         <script type="text/javascript" src="d3/d3.v3.min.js"></script>
         <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
         <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
         <script type="text/javascript" src="js/main.js"></script>
</body>

链接1
链接2

我不是d3专家，但这段代码在我看来是错误的：

var svg = d3.select("body").append("svg")
            .attr("width", diameter)
            .attr("height", diameter)
            .append("g")
            .attr("id","SVG_name")

要引用ADPEND（）的d3文档，请执行以下操作：

以指定的名称作为元素的最后一个子元素追加新元素 当前选择中的每个元素，返回一个新选择 包含附加元素的

因此，实际上，您正在将该id分配给

，而不是

。那么你的

d3.select("#SVG_name").remove();

将删除

，而不是

请尝试以下方法：

var svg = d3.select("body").append("svg")
            .attr("width", diameter)
            .attr("height", diameter)
            .attr("id","SVG_name")
            .append("g")

---

当您将SVG添加到页面上时，它是否创建了一个元素？删除该元素是否有效？@Lugia101101-我正在尝试删除该SVG元素。检查第三行的代码，该行显示d3.select（“”）。remove（）。它正在删除SVG元素。但当我尝试重新绘制另一个SVG时，它会首先在下面创建，而不是在上面创建。我想当我使用svg时，其他一些元素并没有被删除。remove（）让我们这样试试。将“SVG_名称”包装到一个div中。然后使用jquery使用此

$（'div_名称'）.empty（）删除其中的SVG。这应该对你有用。如果你还面临任何问题。提供小提琴样品。