it-swarm.com.de

D3: Elemente entfernen

Ich habe ein Balkendiagramm, das positive und negative Balken erstellt. Ich versuche, die negativen Balken später zu entfernen, aber im Moment werden sie auch nach dem Anhängen der Balken noch angezeigt, wenn ich versuche, die negativen Balken sofort zu entfernen.

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()

Die remove-Anweisung ist die letzte. Der Rest des Codes:

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);
35
user994165

versuchen Sie, Ihre selectAll-Anweisung auf Folgendes umzustellen:

svg.selectAll("rect.negative").remove()

Dies sollte die Tags rect mit der Klasse negative auswählen, obwohl ich nicht zu 100% sicher bin, dass sie gefunden werden, da attrclass als bar negative. Wenn es nicht funktioniert, kann ich versuchen, Ihr Attribut class in negative bar oder nur negative zu ändern.

Entschuldigung, wenn das nicht hilft!

93
AllenSH