exit (). remove () не работает для столбчатой ​​диаграммы с накоплением - PullRequest
Новая
       14

exit (). remove () не работает для столбчатой ​​диаграммы с накоплением

0 голосов
/ 18 февраля 2019

Я пытаюсь построить гистограмму с накоплением, она отлично отображается в первый раз.У меня есть поле выбора на моей странице, и при событии изменения выбранного элемента я снова отображаю его, но график времени не меняется.Я не уверен, где я иду не так.

Пожалуйста, найдите следующий код, который я использую.

Пожалуйста, помогите мне выяснить, где я иду не так.

ОценитеВаша помощь! 

var svg;


function initializeChar(data){

	var chart_width     =   800;
	var chart_height    =   400;
	var color           =   d3.scaleOrdinal( d3.schemeCategory10 );	
		
	// Stack Layout
	var stack           =   d3.stack().keys([
	    'quoteCount', 'policyCount'
	]);
	var stack_data      =   stack(data);

	// Create SVG Element
	if(selAgent == "All"){
	svg             =   d3.select("#chart")
	    .append("svg")
	    .attr("width", chart_width)
	    .attr("height", chart_height);
	}
	
	update();
	
	function update(){
		
		// Scales
		var x_scale         =   d3.scaleBand()
		    .domain(d3.range(data.length))
		    .range([0, chart_width])
		    .paddingInner(0.05);
		var y_scale         =   d3.scaleLinear()
		    .domain([
		        0,
		        d3.max( data, function(d){
		            return d.quoteCount + d.policyCount;
		        })
		    ])
		    .range([ chart_height, 0 ]);		
		
		// Groups
		 var groups          =   svg.selectAll( 'g' )
		    .data( stack_data )
		    .enter()
		    .append( 'g' )
		    .style( 'fill', function( d, i ){
		        return color( i );
		    })
		    .attr("class","g");
			
		// Rectangles
		var rect = groups.selectAll( 'rect' )
		    .data(function( d ){		    	
		        return d;
		    });
		
		rect.exit().attr("class","exit").remove();
		
		rect.attr("x", function(d, i) {
			        return x_scale(i);
			    })
			    .attr("y", function(d) {
			        return y_scale(d[1]);
			    })
			    .attr("height", function(d) {
			        return y_scale(d[0]) - y_scale(d[1]);
			    })
			    .attr("width", x_scale.bandwidth())
			    .attr("class","update");
		
		var myr = rect.enter()
		    .append("rect")
			    .attr("x", function(d, i) {
			        return x_scale(i);
			    })
			    .attr("y", function(d) {
			        return y_scale(d[1]);
			    })
			    .attr("height", function(d) {
			        return y_scale(d[0]) - y_scale(d[1]);
			    })
			    .attr("width", x_scale.bandwidth())
			    .attr("class","rect");
		
		console.log(rect);
		
	}//end of update
	
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
...