Javascript 重复使用图表脚本在同一页面上创建多个响应D3图表

我尝试在同一页面上创建3个响应性条形图，使用相同的脚本和不同的数据

我的问题出现在调整窗口大小时。我不断遇到只在最后一个要呈现的图表中更新的元素

很抱歉没有提供JSFIDLE，但我无法使用FIDLE来呈现我的代码（FIDLE-NEBBEE）

下面的代码片段只生成轴'。我遇到的第一个问题是d3.axisBottom（scale）——这是我遇到的一个例子

第页：

Agreport 1.3
`
身体{
背景色：#e6；
字体系列：无衬线；
字体大小：12px；
}
部分{
位置：相对位置；
填充：24px；
身高：100%；
}
.章节正文：第一个孩子{
利润上限：24px；
}
.col-md-3、.col-lg-3、.col-md-4、.col-lg-4、.col-md-6、，
.col-lg-6{
填充：0；
}
.卡片{
位置：相对位置；
背景色：#F5；
颜色：#212121；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
边框：1px实心#BDBDBD；
盒影：无；
身高：100%；
}
.card-head.card-head-xs{
线高：32px；
最小高度：36px；
}
.卡头{
位置：相对位置；
线高：40px；
最小高度：44px；
垂直对齐：中间对齐；
边界半径：2×2×0；
}
部分{
背景重复：无重复；
}
.行{
左边距：0；
}
.col-md-4{
左侧填充：5px；
右侧填充：5px；
}
.卡头{
背景色：#bdbd；
}
.卡体{
填充：10px 10px 10px 10px；
}
/*--年龄表--*/
#年龄图表行{
位置：相对位置；
高度：345px；
}
#年龄表行。卡片{
边框宽度：1px 1px 0 1px；
}
.图表容器{
高度：288px；
边框：1px实心#bcbc；
背景色：白色；
}
.年龄图表画布{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.轴--y.刻度线{
笔画：浅灰色；
}
var ageDistributionData={….}'
$（文档）.ready（函数（）{
var vData=年龄分布数据；
var dData=年龄分布数据；
var mData=年龄分布数据；
var vChart=新年龄表（“vChart”，vData）；
var dChart=新年龄表（“dChart”，dData）；
var mChart=新年龄图表（“mChart”，mData）；
});

图表脚本：

function AgeChart(container, data) {

var containerW, containerH, chartW, chartH, svg, chartG,
    xScale, x, y, gAxis, xAxis, yAxis, xBottom, bars;
var margin = {top: 20, right: 10, bottom: 50, left: 60};

//-- axis labels -> will need translating --
var yLabelStr = "Anzahl",
    xLabelStr = "Alter";

// parse raw data
var agedData = parseAgedData(data),
    sizeMax = data.AgeDistribution.DataOwnerSizeMax,
    countMax = 0;
    for (var i = 0; i < agedData.length; i++) {
        if(agedData[i].doCount > countMax) {
            countMax = agedData[i].doCount;
        }
    };

// init scales
var xScale = d3.scaleBand()
    .paddingInner(0.16)
    .paddingOuter(0.1);
xScale.domain(agedData.map(function (d) {
    return d.label;
}));
x = d3.scaleBand()
    .paddingInner(0.16)
    .paddingOuter(0.1);
x.domain(agedData.map(function (d, i) {
    return i + 1;
}));
y = d3.scaleLinear();
y.domain([0, countMax]);

// init containers
svg = d3.select(container)
    .append("svg")
    .attr("id", container.substring(1) + "Svg")
    .classed("age-chart-canvas", true);
chartG = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// init axis lines
yAxis = chartG.append("g")
    .attr("class", "axis axis--y");
gAxis = chartG.append("g")
    .attr("class", "axis axis--x");
xAxis = gAxis.append("line")
    .style("stroke", "black")
    .attr("x1", 0)
    .attr("x2", 0)
    .classed("x-domain", true);

// render chart
render();

function render() {

    updateDimensions();

    // set tick lines
    yAxis.call(d3.axisLeft(y))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text(function(d) {
            return d;
        });
    d3.selectAll("g.axis--y g.tick line")
        .attr("x1", function(d) {
            return chartW;
        });
    gAxis.attr("transform", "translate(0," + chartH + ")")
        .call(new d3.axisBottom(xScale));
    gAxis.selectAll(".domain").remove();
    d3.selectAll(".x-domain")
        .attr("x2", function(d) {
            return chartW;
        });

    d3.selectAll("g.axis--x g.tick line")
        .attr("y2", function(d, i) {
            if(i%2 == 0)
                return 6;
            else
                return 16;
        })
        .style("fill", "#bdbdbd");
    d3.selectAll("g.axis--x g.tick text")
        .attr("y", function(d, i) {
            if(i%2 == 0)
                return 9;
            else
                return 20;
        });

};

function updateDimensions() {
    containerW = getDimension(container, "width");
    containerH = getDimension(container, "height");
    chartW = containerW - margin.left - margin.right;
    chartH = containerH - margin.top - margin.bottom;

    // set axis scales
    xScale.rangeRound([0, chartW]);
    x.rangeRound([0, chartW]);
    y.rangeRound([chartH, 0]);
};

d3.select(window).on("resize", render);

};

function AgeChart(chartContainer, data) {

    var chartObj = {

    // public properties
    xAxisLabel: "Alter",
    yAxisLabel: "Anzahl",
    margin: {top: 20, right: 10, bottom: 50, left: 60},
    width: 0,
    height: 0,
    dummyData: 0,
    sizeMax: 0,
    countMax: 0,

    // private properties
    $chartGroup: 0,
    $container: "",
    $d: 0,
    $svg: 0,
    $x: d3.scaleBand()
        .paddingInner(0.16)
        .paddingOuter(0.1),
    $xscale: d3.scaleBand()
        .paddingInner(0.16)
        .paddingOuter(0.1),
    $y: d3.scaleLinear(),
    $xAxis: 0,
    $yAxis: 0,

    // property sets
    get data() { return this.$d; },
    set data(d) {
        this.$d = d;
        this.dummyData = parseAgedData(d);
        this.sizeMax = d.AgeDistribution.DataOwnerSizeMax;
        for (var i = 0; i < this.dummyData.length; i++) {
            if(this.dummyData[i].doCount > this.countMax) {
                this.countMax = chartObj.dummyData[i].doCount;
            }
        };
        this.$xscale.domain(this.dummyData.map(function(d) {
            return d.label;
        }));
        this.$x.domain(this.dummyData.map(function(d,i) {
            return i + 1;
        }))
        this.$y.domain([0, this.countMax]);
    },
    get container() { return this.$container },
    set container(c) {
        this.$container = c;
        updateDimensions();
        this.$svg = d3.select(this.container)
            .append("svg")
            .attr("id", chartObj.container.substring(1) + "Svg")
            .classed("age-chart-canvas", true);
        this.$chartGroup = this.$svg.append("g")
            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
        this.$yAxis = this.$chartGroup.append("g")
            .attr("class", "axis axis--y");
        this.$xAxis = this.$chartGroup.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + this.height + ")");
    },

    // methods
    render: function() {

        updateDimensions();

        this.$xscale.rangeRound([0, this.width]);
        this.$x.rangeRound([0, this.width]);
        this.$y.rangeRound([this.height, 0]);
        this.$yAxis.call(d3.axisLeft(this.$y))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")
            .text(function(d) {
                return d;
            });
        var chartW = this.width;
        d3.selectAll("g.axis--y g.tick line")
            .attr("x1", function(d) {
                return chartW;
            });
        this.$xAxis.call(d3.axisBottom(this.$xscale));
        d3.selectAll("g.axis--x g.tick line")
            .attr("y2", function(d, i) {
                if(i%2 == 0)
                    return 6;
                else
                    return 16;
            })
            .style("fill", "#bdbdbd");
        d3.selectAll("g.axis--x g.tick text")
            .attr("y", function(d, i) {
                if(i%2 == 0)
                    return 9;
                else
                    return 20;
            });

       }
    };

    chartObj.data = data;
    chartObj.container = chartContainer;
    chartObj.render();

    function updateDimensions() {

        var containerW = getDimension(chartObj.container, "width"),
        containerH = getDimension(chartObj.container, "height");
        chartObj.width = containerW - chartObj.margin.left -   
        chartObj.margin.right;
        chartObj.height = containerH - chartObj.margin.top -   
        chartObj.margin.bottom;

   };

    return chartObj;

};

函数年龄图（容器、数据）{
var containerW、containerH、chartW、chartH、svg、chartG、，
x刻度，x，y，gAxis，xAxis，yAxis，xBottom，bar；
VarMargin={顶部：20，右侧：10，底部：50，左侧：60}；
//--轴标签->需要翻译--
var yLabelStr=“Anzahl”，
xLabelStr=“Alter”；
//解析原始数据
var agedData=parseAgedData（数据），
sizeMax=data.AgeDistribution.DataOwnerSizeMax，
countMax=0；
对于（变量i=0；icountMax）{
countMax=agedData[i].doCount；
}
};
//初始刻度
var xScale=d3.scaleBand（）
.填充器（0.16）
.填塞器（0.1）；
域（agedData.map）（函数（d）{
返回d.标签；
}));
x=d3.scaleBand（）
.填充器（0.16）
.填塞器（0.1）；
x、 域（agedData.map）（函数（d，i）{
返回i+1；
}));
y=d3.刻度线（）；
y、 域（[0，countMax]）；
//初始化容器
svg=d3.选择（容器）
.append（“svg”）
.attr（“id”，容器子字符串（1）+“Svg”）
.classed（“年龄图表画布”，真实）；
chartG=svg.append（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//初始轴线
yAxis=chartG.append（“g”）
.attr（“类”、“轴-y”）；
gAxis=chartG.append（“g”）
.attr（“类”、“轴--x”）；
xAxis=gAxis.append（“行”）
.style（“笔划”、“黑色”）
.attr（“x1”，0）
.attr（“x2”，0）
.classed（“x域”，真）；
//渲染图
render（）；
函数render（）{
更新维度（）；
//设置刻度线
yAxis.call（d3.axisLeft（y））
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.attr（“文本锚定”、“结束”）
.文本（功能（d）{
返回d；
});
d3.全选（“g轴-y g记号线”）
.attr（“x1”，函数（d）{
返回图表W；
});
gAxis.attr（“转换”、“转换（0，+chartH+）”）
.call（新的d3.axisBottom（xScale））；
gAxis.selectAll（“.domain”）.remove（）；
d3.选择全部（“.x域”）
.attr（“x2”，函数（d）{
返回图表W；
});
d3.选择全部（“g轴--x g记号线”）
.attr（“y2”，函数（d，i）{
如果（i%2==0）
返回6；
其他的
返回16；
})
.样式（“填充”和“#bdbdbd”）；
d3.选择全部（“g轴--x g
function AgeChart(chartContainer, data) {

    var chartObj = {

    // public properties
    xAxisLabel: "Alter",
    yAxisLabel: "Anzahl",
    margin: {top: 20, right: 10, bottom: 50, left: 60},
    width: 0,
    height: 0,
    dummyData: 0,
    sizeMax: 0,
    countMax: 0,

    // private properties
    $chartGroup: 0,
    $container: "",
    $d: 0,
    $svg: 0,
    $x: d3.scaleBand()
        .paddingInner(0.16)
        .paddingOuter(0.1),
    $xscale: d3.scaleBand()
        .paddingInner(0.16)
        .paddingOuter(0.1),
    $y: d3.scaleLinear(),
    $xAxis: 0,
    $yAxis: 0,

    // property sets
    get data() { return this.$d; },
    set data(d) {
        this.$d = d;
        this.dummyData = parseAgedData(d);
        this.sizeMax = d.AgeDistribution.DataOwnerSizeMax;
        for (var i = 0; i < this.dummyData.length; i++) {
            if(this.dummyData[i].doCount > this.countMax) {
                this.countMax = chartObj.dummyData[i].doCount;
            }
        };
        this.$xscale.domain(this.dummyData.map(function(d) {
            return d.label;
        }));
        this.$x.domain(this.dummyData.map(function(d,i) {
            return i + 1;
        }))
        this.$y.domain([0, this.countMax]);
    },
    get container() { return this.$container },
    set container(c) {
        this.$container = c;
        updateDimensions();
        this.$svg = d3.select(this.container)
            .append("svg")
            .attr("id", chartObj.container.substring(1) + "Svg")
            .classed("age-chart-canvas", true);
        this.$chartGroup = this.$svg.append("g")
            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
        this.$yAxis = this.$chartGroup.append("g")
            .attr("class", "axis axis--y");
        this.$xAxis = this.$chartGroup.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + this.height + ")");
    },

    // methods
    render: function() {

        updateDimensions();

        this.$xscale.rangeRound([0, this.width]);
        this.$x.rangeRound([0, this.width]);
        this.$y.rangeRound([this.height, 0]);
        this.$yAxis.call(d3.axisLeft(this.$y))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")
            .text(function(d) {
                return d;
            });
        var chartW = this.width;
        d3.selectAll("g.axis--y g.tick line")
            .attr("x1", function(d) {
                return chartW;
            });
        this.$xAxis.call(d3.axisBottom(this.$xscale));
        d3.selectAll("g.axis--x g.tick line")
            .attr("y2", function(d, i) {
                if(i%2 == 0)
                    return 6;
                else
                    return 16;
            })
            .style("fill", "#bdbdbd");
        d3.selectAll("g.axis--x g.tick text")
            .attr("y", function(d, i) {
                if(i%2 == 0)
                    return 9;
                else
                    return 20;
            });

       }
    };

    chartObj.data = data;
    chartObj.container = chartContainer;
    chartObj.render();

    function updateDimensions() {

        var containerW = getDimension(chartObj.container, "width"),
        containerH = getDimension(chartObj.container, "height");
        chartObj.width = containerW - chartObj.margin.left -   
        chartObj.margin.right;
        chartObj.height = containerH - chartObj.margin.top -   
        chartObj.margin.bottom;

   };

    return chartObj;

};

    <script type="text/javascript">

        $(document).ready(function() {

            var vData = ageDistributionData;
            var dData = ageDistributionData;
            var mData = ageDistributionData;

            var vChart = AgeChart("#vChart", vData);
            var dChart = new AgeChart("#dChart", dData);
            var mChart = new AgeChart("#mChart", mData);

            window.addEventListener("resize", function() {
                vChart.render();
                dChart.render();
                mChart.render();
            })

        });

    </script>

    d3.select(window).on("resize", render);

    var resizeId = "resize." + scope.chartId
    d3.select(window).on(resizeId, render);