javascript D3：删除元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16260285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3: Removing Elements
提问by user994165
I have a bar chart that creates positive and negative bars. I'm trying to remove the negative bars later on but for now, even after appending the bars, if I try to immediately remove the negative bars, they still appear.
我有一个条形图，可以创建正条和负条。我稍后会尝试删除负条，但现在，即使在附加条之后，如果我尝试立即删除负条，它们仍然会出现。
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 750 - margin.left - margin.right,
height = data.length * 20 //500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width*.85])
//chart1.x =x
//chart1.y = y
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], 0);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
var svg = d3.select("#barchart").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 + ")");
//d3.tsv("data.tsv", type, function(error, data) {
x.domain(d3.extent(data, function(d) { return +d.netdonations_over_population_to_gdppercap_percentage; })).nice();
y.domain(data.map(function(d) { return d.name; }));
bar = svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function(d) { return +d.netdonations_over_population_to_gdppercap_percentage < 0 ? "bar negative" : "bar positive"; })
.attr("x", function(d) { return x(Math.min(0, +d.netdonations_over_population_to_gdppercap_percentage)); })
.attr("y", function(d) { return y(d.name); })
.attr("width", function(d) { return Math.abs(x(+d.netdonations_over_population_to_gdppercap_percentage) - x(0)); })
.attr("height", y.rangeBand()).style("stroke","white")
bar.selectAll(".negative").data([]).exit().remove()
The remove statement is the last one. The rest of the code:
remove 语句是最后一个。其余代码：
svg.selectAll("text")
.data(data)
.enter().append("text").text(function(d) {
return d;
}).attr("y", function(d, i) {
return y(d.name)+ y.rangeBand();
//return i * (height / data.length)+30;
}).attr("x", function(d) {
return x(0) //x(Math.min(0, +d.netdonations_over_population_to_gdppercap_percentage));
}).text(function(d) {
//return y(d) + y.rangeBand() / 2;
return d.name + " " + d.netdonations_over_population_to_gdppercap_percentage;
}).style("font-size","14px").attr("dx", 3).attr("dy", "-0.45em")
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("x1", x(0))
.attr("x2", x(0))
.attr("y2", height);
回答by AllenSH
try switching your selectAll statement to:
尝试将您的 selectAll 语句切换为：
svg.selectAll("rect.negative").remove()
This should select the tags rectwith class negativealthough I'm not 100% sure it will find it because the attrclassis written as bar negative. If it doesn't work I might try changing your classattribute to something like negative baror just negative.
这应该选择标签rect带班negative，虽然我不是100％肯定它会找到它，因为attrclass写成bar negative。如果它不工作，我可能会尝试改变你的class属性类似negative bar或者只是negative。
Sorry if this doesn't help!
对不起，如果这没有帮助！
