unempfänglich Bars in ansonsten ansprechenden gruppiert d3 Balkendiagramm

Question

Ich versuche, eine reaktions gruppiert d3 Balkendiagramm mit diesem als Leitfaden zu bauen:

http://blog.webkid.io/responsive-chart-usability-d3/

ich dies auch für die Führung verwendet die auf die Schaffung von gruppierte Diagramm:

https://bl.ocks.org/mbostock/3887051

ich habe jetzt ein Diagramm, das die Achse und Rasterlinien auf Fenster resize ändert die Größe, aber die Stäbe (Rects) r Emain behoben. Basierend auf dem Code aus dem Beispiel von mobostock ist es für mich unklar, was geändert werden muss, damit sich die Balken bei Änderung der X-Achse an ihre neue Position bewegen können.

Codebeispiele unten von den 3 Schlüsselmethoden. init wird ausgeführt und ruft beim ersten Laden render auf. Dann wird der Ereignis-Listener für die Fenstergrößenänderung ausgeführt .

Code von init-Methode:

x = d3.scale.ordinal().domain(data.map(d => d.label)); 
x1 = d3.scale.ordinal().domain(scales); 
y = d3.scale.linear().domain([0, 5]); 

xAxis = d3.svg.axis().orient('bottom'); 
yAxis = d3.svg.axis() 
    .orient('left') 

svg = d3.select(element).append('svg'); 
chartWrapper = svg.append('g'); 
chartWrapper.append('g').classed('x axis', true); 
chartWrapper.append('g').classed('y axis', true); 

Code von Verfahren machen:

x.rangeBands([0, width]); 
x1.rangeRoundBands([0, x.rangeBand()]); 
y.range([height, 0]); 

svg 
    .attr('width', width + margin.right + margin.left) 
    .attr('height', height + margin.top + margin.bottom); 
chartWrapper.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); 

xAxis.scale(x); 
yAxis.scale(y); 

svg.select('.x.axis') 
    .attr('transform', 'translate(0, ' + height + ')') 
    .call(xAxis) 

svg.select('.y.axis') 
    .call(yAxis) 

bars = svg.selectAll('.bar') 
    .data(data) 
.enter().append("g") 
    .attr("class", "bar") 
    .attr("transform", d => "translate(" + x(d.label) + ", 0)"); 

bars.selectAll("rect") 
    .data(d => d.scores) 
    .enter() 
    .append("rect") 
    .attr("transform", "translate(125, 21)") 
    .attr("width", x1.rangeBand()) 
    .attr("x", d => x1(d.name)) 
    .attr("y", d => y(d.value)) 
    .attr("height", d => height - y(d.value)) 

Code von updateDimensions:

margin.top = 20; 
margin.right = 10; 
margin.left = 125; 
margin.bottom = 110; 

width = elementWidth - margin.left - margin.right; 
height = 500 - margin.top - margin.bottom; 

Ich werde auch hinzufügen, dass ich in geschaut haben einige der anderen Lösungen für reaktionsschnelle Diagramme, wie die Verwendung der ViewBox zum Ändern der Größe der gesamten Svg. Ich bevorzuge die Herangehensweise, einen Event-Handler für die Fenstergrößenänderung zu verwenden, damit ich Änderungen an dem Diagramm für kleinere Geräte vornehmen kann.

Jede Hilfe wird sehr geschätzt.

Answer 1

Nun, ich habe eine Lösung gefunden. Weiß nicht, ob es ein guter ist, aber es macht den Job erledigt!

Hinzufügen svg.selectAll('.bar').remove(); vor dem Hinzufügen der Bar Elemente war der Trick.