exit()。remove()不适用于堆积条形图

时间:2019-02-17 22:45:06

标签: d3.js stack bar-chart

我正在尝试绘制堆积的条形图,这是第一次完美呈现。我的页面上有一个选择框,并且在选择项发生更改事件时,我再次渲染它,但是时间图没有改变。我不确定我要去哪里错了。

请找到我正在使用的以下代码。

请帮助我弄清楚我要去哪里。

感谢您的帮助!

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>

0 个答案:

没有答案