我正在编写一个子程序，使用d3绘制和重绘堆积的条形图。我的出发点是Bostock的例子Stacked Bar Chart，http://bl.ocks.org/mbostock/3886208。我的问题是，我第一次调用例程时，一切都按预期工作，但第二次被调用（例如调整大小）时，下面的代码中会出现错误;缩放函数y（）不再存在。
state.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); }) // Parsing error
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
调试显示在
中的函数调用内部.attr("y", function(d) { return y(d.y1); })
函数y突然变为未定义，因此返回值y（d.y1）不存在。
我已经根据d3示例编写了其他子程序，并且没有任何重复调用它们的问题（出于扩展目的）。有人可以提供解决方法或解释代码中发生的事情吗？
更多详细信息：以下是您可以运行的完整示例。子程序被调用两次，但第二次失败时会绘制数据。解析错误发生在第77行。
完整的示例代码：
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.axis, .legend { font: 10px sans-serif;}
.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges;}
.bar { fill: steelblue;}
</style>
<script>
function createStackedBarChart(division, data, x_data, group_name, y_label, yTic){
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
color.domain(d3.keys(data[0]).filter(function(key) { return key !== x_data; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.ages[d.ages.length - 1].y1;
});
var margin = {top: 20, right: 20, bottom: 40, left: 50},
width = parseInt(d3.select(division).style("width")) - margin.left - margin.right,
height = parseInt(d3.select(division).style("height")) - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0])
.nice();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
if (yTic == "s") {
formatValue = d3.format(".2s");
yAxis.tickFormat(function(d) { return formatValue(d)});
}
if (yTic == "%") yAxis.ticks(10, "%");
var svg = d3.select(division).append("svg")
.attr("style", "width: 100%;height: 100%;")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(function(d) { return d[x_data]; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
var x_label = x_data;
if (group_name) x_label = x_label + " / " + group_name;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "x axis")
.attr("x", width/2 )
.attr("y", margin.bottom-6)
.style("text-anchor", "middle")
.text(x_label);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate("+ (-margin.left) +","+(height/2)+")rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text(y_label);
var selGrp = "."+x_data;
var group = svg.selectAll(selGrp)
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + x(d[x_data]) + ",0)"; });
group.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.style("fill", function(d) { return color(d.name); });
}
</script>
<body>
<div id="Chart" style="width:60vw;height:40vh;"></div>
<script>
d3.csv("data.csv", function(error, data) {
createStackedBarChart("#Chart", data, "State", "Age", "Population", "s");
createStackedBarChart("#Chart", data, "State", "Age", "Population", "s");
});
</script>
</body>
</html>
数据：
State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496 TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223 NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672 FL,1140516,1938695,925060,1607297,4782119,4746856,3187797 IL,894368,1558919,725973,1311479,3596343,3239173,1575308 PA,737462,1345341,679201,1203944,3157759,3414001,1910571