Javascript d3.选择（'；svg'；）。删除（）不会删除图表
我有一个闪亮的应用程序，它将数据发送到D3脚本以构建一个双垂直图表。当数据刷新时，图形必须更新。为此，我使用了d3.select（'svg'）.remove（）。问题在于，图表是在彼此之上构建的。我已经包含了一个我正在使用的JS文件的可复制示例。这里我提供了一个静态数据集Javascript d3.选择（'；svg'；）。删除（）不会删除图表,javascript,d3.js,Javascript,D3.js,我有一个闪亮的应用程序，它将数据发送到D3脚本以构建一个双垂直图表。当数据刷新时，图形必须更新。为此，我使用了d3.select（'svg'）.remove（）。问题在于，图表是在彼此之上构建的。我已经包含了一个我正在使用的JS文件的可复制示例。这里我提供了一个静态数据集 <!DOCTYPE html> <meta charset="utf-8"> <style> text{ font-size:12px;
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text{
font-size:12px;
}
.mainBars rect{
shape-rendering: auto;
fill-opacity: 0;
stroke-width: 0.5px;
stroke: rgb(0, 0, 0);
stroke-opacity: 0;
}
.subBars{
shape-rendering:crispEdges;
}
.edges{
stroke:none;
fill-opacity:0.5;
}
.header{
text-anchor:middle;
font-size:16px;
}
line{
stroke:grey;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script>
var data=[['Lite','CA',16,0],
['Small','CA',1278,4],
['Medium','CA',27,0],
['Plus','CA',58,0],
['Grand','CA',1551,15],
['Elite','CA',141,0],
['Lite','AZ',5453,35],
['Small','AZ',683,1],
['Medium','AZ',862,0],
['Grand','AZ',6228,30],
['Lite','AL',15001,449],
['Small','AL',527,3],
['Medium','AL',836,0],
['Plus','AL',28648,1419],
['Grand','AL',3,0],
['Lite','CO',13,0],
['Small','CO',396,0],
['Medium','CO',362,0],
['Plus','CO',78,10],
['Grand','CO',2473,32],
['Elite','CO',2063,64],
['Medium','DE',203,0],
['Grand','DE',686,2],
['Elite','DE',826,0],
['Lite','KS',1738,110],
['Small','KS',12925,13],
['Medium','KS',15413,0],
['Small','GA',2166,2],
['Medium','GA',86,0],
['Plus','GA',348,3],
['Grand','GA',4244,18],
['Elite','GA',1536,1],
['Small','IA',351,0],
['Grand','IA',405,1],
['Small','IL',914,1],
['Medium','IL',127,0],
['Grand','IL',1470,7],
['Elite','IL',516,1],
['Lite','IN',43,0],
['Small','IN',667,1],
['Medium','IN',172,0],
['Plus','IN',149,1],
['Grand','IN',1380,5],
['Elite','IN',791,23],
['Small','FL',1,0],
['Grand','FL',1,0],
['Small','MD',1070,1],
['Grand','MD',1171,2],
['Elite','MD',33,0],
['Plus','TX',1,0],
['Small','MS',407,0],
['Medium','MS',3,0],
['Grand','MS',457,2],
['Elite','MS',20,0],
['Small','NC',557,0],
['Medium','NC',167,0],
['Plus','NC',95,1],
['Grand','NC',1090,5],
['Elite','NC',676,6],
['Lite','NM',1195,99],
['Small','NM',350,3],
['Medium','NM',212,0],
['Grand','NM',1509,8],
['Lite','NV',3899,389],
['Small','NV',147,0],
['Medium','NV',455,0],
['Plus','NV',1,1],
['Grand','NV',4100,16],
['Lite','OH',12,0],
['Small','OH',634,2],
['Medium','OH',749,0],
['Plus','OH',119,1],
['Grand','OH',3705,19],
['Elite','OH',3456,25],
['Small','PA',828,2],
['Medium','PA',288,0],
['Plus','PA',141,0],
['Grand','PA',2625,7],
['Elite','PA',1920,10],
['Small','SC',1146,2],
['Medium','SC',212,0],
['Plus','SC',223,4],
['Grand','SC',1803,6],
['Elite','SC',761,8],
['Small','TN',527,0],
['Medium','TN',90,0],
['Grand','TN',930,4],
['Elite','TN',395,1],
['Lite','ME',7232,58],
['Small','ME',1272,0],
['Medium','ME',1896,0],
['Plus','ME',1,0],
['Grand','ME',10782,33],
['Elite','ME',1911,3],
['Small','VA',495,0],
['Medium','VA',32,0],
['Plus','VA',7,0],
['Grand','VA',1557,12],
['Elite','VA',24,0],
['Small','WA',460,1],
['Plus','WA',88,3],
['Grand','WA',956,3],
['Small','WV',232,0],
['Medium','WV',71,0],
['Grand','WV',575,2],
['Elite','WV',368,3]
];
d3.select('svg').remove();
var color ={Elite:"#3366CC", Grand:"#DC3912", Lite:"#FF9900", Medium:"#109618", Plus:"#990099", Small:"#0099C6"};
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);
svg.append("text").attr("x",250).attr("y",70)
.attr("class","header").text("Sales Attempt");
svg.append("text").attr("x",750).attr("y",70)
.attr("class","header").text("Sales");
var g =[svg.append("g").attr("transform","translate(150,100)")
,svg.append("g").attr("transform","translate(650,100)")];
var bp=[ viz.bP()
.data(data)
.min(12)
.pad(1)
.height(600)
.width(200)
.barSize(35)
.fill(d=>color[d.primary])
,viz.bP()
.data(data)
.value(d=>d[3])
.min(12)
.pad(1)
.height(600)
.width(200)
.barSize(35)
.fill(d=>color[d.primary])
];
[0,1].forEach(function(i){
g[i].call(bp[i])
g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("Channel");
g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("State");
g[i].append("line").attr("x1",-100).attr("x2",0);
g[i].append("line").attr("x1",200).attr("x2",300);
g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",-100).attr("x2",0);
g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);
g[i].selectAll(".mainBars")
.on("mouseover",mouseover)
.on("mouseout",mouseout);
g[i].selectAll(".mainBars").append("text").attr("class","label")
.attr("x",d=>(d.part=="primary"? -30: 30))
.attr("y",d=>+6)
.text(d=>d.key)
.attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
g[i].selectAll(".mainBars").append("text").attr("class","perc")
.attr("x",d=>(d.part=="primary"? -100: 80))
.attr("y",d=>+6)
.text(function(d){ return d3.format("0.0%")(d.percent)})
.attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
});
function mouseover(d){
[0,1].forEach(function(i){
bp[i].mouseover(d);
g[i].selectAll(".mainBars").select(".perc")
.text(function(d){ return d3.format("0.0%")(d.percent)});
});
}
function mouseout(d){
[0,1].forEach(function(i){
bp[i].mouseout(d);
g[i].selectAll(".mainBars").select(".perc")
.text(function(d){ return d3.format("0.0%")(d.percent)});
});
}
d3.select(self.frameElement).style("height", "800px");
</script>
</body>
</html>
正文{
字体大小：12px；
}
.mainBars rect{
形状渲染：自动；
填充不透明度：0；
笔划宽度：0.5px；
笔划：rgb（0,0,0）；
笔画不透明度：0；
}
.底基层{
形状渲染：边缘清晰；
}
.边缘{
中风：无；
填充不透明度：0.5；
}
.标题{
文本锚定：中间；
字体大小：16px；
}
线{
笔画：灰色；
}
变量数据=[['Lite'，'CA'，16,0]，
['Small'，'CA'，1278,4]，
['Medium'，'CA'，27,0]，
[Plus'，'CA'，58,0]，
[Grand'，'CA'，1551,15]，
['Elite'，'CA'，141,0]，
[Lite'，AZ'，5453,35]，
['Small'，'AZ'，683,1]，
['Medium'，'AZ'，862,0]，
[Grand'，AZ'，6228,30]，
[Lite'，AL'，15001449]，
[Small'，AL'，527,3]，
['Medium'，'AL'，836,0]，
[Plus'，AL'，286481419]，
[Grand'，AL'，3,0]，
[Lite'，CO'，13,0]，
[Small'，CO'，396,0]，
[Medium'，'CO'，362,0]，
[Plus'，CO'，78,10]，
[Grand'，CO'，2473,32]，
[Elite'，CO'，2063,64]，
[Medium'，'DE'，203,0]，
[Grand'，DE'，686,2]，
[Elite'，DE'，826,0]，
[Lite'，'KS'，1738110]，
['Small'，'KS'，12925,13]，
['Medium'，'KS'，15413,0]，
['Small'，'GA'，2166,2]，
['Medium'，'GA'，86,0]，
[Plus'，GA'，348,3]，
[Grand'，GA'，4244,18]，
['Elite'，'GA'，1536,1]，
['Small'，'IA'，351,0]，
[Grand'，IA'，405,1]，
['Small'，'IL'，914,1]，
['Medium'，'IL'，127,0]，
[Grand'，IL'，1470,7]，
[Elite'，IL'，516,1]，
[Lite'，IN'，43,0]，
['Small'，'IN'，667,1]，
[Medium'，IN'，172,0]，
[Plus'，IN'，149,1]，
[Grand'，IN'，1380,5]，
[Elite'，IN'，791,23]，
['Small'，'FL'，1,0]，
[Grand'，FL'，1,0]，
['Small'，'MD'，1070,1]，
[Grand'，MD'，1171,2]，
['Elite'，'MD'，33,0]，
['Plus'，'TX'，1,0]，
['Small'，'MS'，407,0]，
['Medium'，'MS'，3,0]，
[Grand'，MS'，457,2]，
['Elite'，'MS'，20,0]，
['Small'，'NC'，557,0]，
['Medium'，'NC'，167,0]，
['Plus'，'NC'，95,1]，
[Grand'，NC'，1090,5]，
[Elite'，NC'，676,6]，
['Lite'，'NM'，1195,99]，
['Small'，'NM'，350,3]，
['中等'，'纳米'，212,0]，
[Grand'，NM'，1509,8]，
[Lite'，NV'，3899389]，
['Small'，'NV'，147,0]，
[Medium'，'NV'，455,0]，
[Plus'，NV'，1,1]，
[Grand'，NV'，4100,16]，
[Lite'，'OH'，12,0]，
['Small'，'OH'，634,2]，
['Medium'，'OH'，749,0]，
[Plus'，'OH'，119,1]，
[Grand'，'OH'，3705,19]，
[Elite'，'OH'，3456,25]，
['Small'，'PA'，828,2]，
['Medium'，'PA'，288,0]，
['Plus'，'PA'，141,0]，
[Grand'，PA'，2625,7]，
['Elite'，'PA'，1920,10]，
['Small'，'SC'，1146,2]，
['Medium'，'SC'，212,0]，
['Plus'，'SC'，223,4]，
[Grand'，SC'，1803,6]，
[Elite'，'SC'，761,8]，
[Small'，'TN'，527,0]，
[‘中’、‘TN’、90,0]，
[Grand'，TN'，930,4]，
[Elite'，TN'，395,1]，
[Lite'，'ME'，7232,58]，
['Small'，'ME'，1272,0]，
['Medium'，'ME'，1896,0]，
['Plus'，'ME'，1,0]，
[Grand'，'ME'，10782,33]，
['Elite'，'ME'，1911,3]，
['Small'，'VA'，495,0]，
['Medium'，'VA'，32,0]，
[Plus'，VA'，7,0]，
[Grand'，VA'，1557,12]，
['Elite'，'VA'，24,0]，
['Small'，'WA'，460,1]，
[Plus'，WA'，88,3]，
[Grand'，WA'，956,3]，
['Small'，'WV'，232,0]，
[‘中等’，‘WV’，71,0]，
[Grand'，WV'，575,2]，
[Elite'，WV'，368,3]
];
d3.选择（'svg'）.remove（）；
var color={Elite:#3366CC'，Grand:#DC3912'，Lite:#FF9900'，Middle:#109618'，Plus:#990099'，Small:#0099C6}；
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，960）.attr（“height”，800）；
svg.append（“text”）.attr（“x”，250）.attr（“y”，70）
.attr（“类”、“标题”）。文本（“销售尝试”）；
svg.append（“text”）.attr（“x”，750）.attr（“y”，70）
.attr（“类别”、“标题”）。文本（“销售”）；
var g=[svg.append（“g”）.attr（“transform”、“translate（150100）”）
，svg.append（“g”）.attr（“transform”，“translate（650100）”））；
var bp=[viz.bp（）
.数据（数据）
.min（12）
.pad（1）
.高度（600）
.宽度（200）
.酒吧大小（35）
.fill（d=>color[d.primary]）
，即bP（）
.数据（数据）
.值（d=>d[3]）
.min（12）
.pad（1）
.高度（600）
.宽度（200）
.酒吧大小（35）
.fill（d=>color[d.primary]）
];
[0,1]。forEach（函数（i）{
g[i].调用（bp[i]）
g[i].append（“text”）.attr（“x”）和-50.attr（“y”）和-8.style（“text-anchor”，“middle”）.text（“Channel”）；
g[i].append（“text”）.attr（“x”，250）.attr（“y”），-8.style（“text-anchor”，“middle”）.text（“State”）；
g[i].append（“line”）.attr（“x1”）和-100.attr（“x2”，0）；
g[i].附加（“行”）.attr（“x1”，200）.attr（“x2”，300）；
g[i].追加（“行”）.attr（“y1”，610）.attr（“y2”，610）.attr（“x1”），-100.attr（“x2”，0）；
g[i].附加（“行”）.attr（“y1”，610）.attr（“y2”，610）.attr（“x1”，200）.attr（“x2”，300）；
g[i]。选择全部（“.mainBars”）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）；
g[i].selectAll（“.mainBars”）.append（“text”）.attr（“class”，“label”）
.attr（“x”，d=>（d.part==“主”？-30:30））
.attr（“y”，d=>+6）
.text（d=>d.key）
.attr（“文本锚定”，d=>（d.part==“主”？“结束”：“开始”）；
g[i].selectAll（“.mainBars”）.append（“text”）.attr（“class”，“perc”）
.attr（“x”，d=>（d.part==“主”？-100:80））
.attr（“y”，d=>+6）
.text（函数（d）{返回d3.format（“0.0%”）（d.percent）}）
.attr（“文本锚定”，d=>（d.part==“主”？“结束”：“开始”）；
});
功能鼠标盖（d）{
d3.selectAll('svg').remove();