我正在尝试绘制堆积的条形图,这是第一次完美呈现。我的页面上有一个选择框,并且在选择项发生更改事件时,我再次渲染它,但是时间图没有改变。我不确定我要去哪里错了。
请找到我正在使用的以下代码。
请帮助我弄清楚我要去哪里。
感谢您的帮助!
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>