无法让D3生成的SVG始终显示在屏幕上

Question

我正在开发一个Javascript项目，我正在尝试使用d3渲染以下图表。

问题是，有时候黄色图表的svg元素有时（并且随机）无法显示。刷新页面后（一次或多次），问题通常会消失。发生这种情况时，浏览器开发工具仍会显示svg元素存在：

这只发生在黄色图表中，而不会发生在蓝色图表中。

这是我用来创建图表的功能：

function makeGraphs(filterDisease,filterAir) {
var width = 840;
var height = 110;
var barPadding = 1;

var dateFormat = d3.time.format("%Y-%m-%d");

var xScale = d3.time.scale()
    .range([0,width-50]);

var yScaleDisease = d3.scale.linear()
    .range([height,0]);

var yScaleAir = d3.scale.linear()
    .range([0,height]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("top");

var yAxisDisease = d3.svg.axis()
    .scale(yScaleDisease)
    .orient("left")
    .ticks(5);

var yAxisAir = d3.svg.axis()
    .scale(yScaleAir)
    .orient("left")
    .ticks(5);

var svgDisease = d3.select("body").select("#comparison-chart")
    .append("svg")
    .attr("class","chart-comparison")
    .attr("id","chart-comparison-disease")
    .attr("width",width)
    .attr("height",height);

var svgAir = d3.select("body").select("#comparison-chart")
    .append("svg")
    .attr("class", "chart-comparison")
    .attr("id", "chart-comparison-air")
    .attr("width", width)
    .attr("height", height + 20);

d3.json("/datasets/disease", function(error, datasetDisease) {
    datasetDisease.forEach(function(d) {
        d["date"] = dateFormat.parse(d["date"]);
        d["total"] = 0
        for (i=0;i<filterDisease.length;i++) {
            d["total"] += d[filterDisease[i]];
        }
    });

    var ndxDisease = crossfilter(datasetDisease);
    var dateDimDisease = ndxDisease.dimension(function(d) {return d["date"];});
    var total_disease = dateDimDisease.group().reduceSum(function(d) {return d["total"];});

    var datasetDisease_formatted = total_disease.all();

    xScale.domain([new Date(datasetDisease_formatted[0]["key"]), new Date(datasetDisease_formatted[datasetDisease_formatted.length -1]["key"])]);
    yScaleDisease.domain([0,d3.max(datasetDisease_formatted,function(d) {return d["value"];})]);

    svgDisease.selectAll("rect")
        .data(datasetDisease_formatted)
        .enter()
        .append("rect")
        .attr("x", function(d) { return xScale(new Date(d["key"]));})
        .attr("y", function(d) { return yScaleDisease(d["value"]); })
        .attr("width", (width-50)/datasetDisease_formatted.length - barPadding)
        .attr("height", function(d) {
            return height - yScaleDisease(d["value"]);
        })
        .attr("fill", "#19C3CD")
        .attr("transform", "translate(50,0)");

    svgDisease.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(30,0)")
        .call(yAxisDisease);

    svgDisease.append("text")
        .text("Disease Records")
        .attr("x", 650)
        .attr("y", 20);

});

d3.json("/datasets/air", function(error, datasetAir) {
    datasetAir.forEach(function(d) {
        d["date"] = dateFormat.parse(d["date"]);
        d["total"] = 0
        for (i=0;i<filterAir.length;i++) {
            d["total"] += d[filterAir[i]];
        }
    });

    var ndxAir = crossfilter(datasetAir);
    var dateDimAir = ndxAir.dimension(function(d) {return d["date"];});
    var total_pollutants = dateDimAir.group().reduceSum(function(d) {return d["total"];});

    var datasetAir_formatted = total_pollutants.all();

    yScaleAir.domain([0, d3.max(datasetAir_formatted, function(d) {return d["value"];})])

    svgAir.selectAll("rect")
        .data(datasetAir_formatted)
        .enter()
        .append("rect")
        .attr("x", function(d) { return xScale(new Date(d["key"]));})
        .attr("y",0)
        .attr("width", (width-50)/datasetAir_formatted.length - barPadding)
        .attr("height", function(d) {
            return yScaleAir(d["value"]);
        })
        .attr("fill", "#FED40A")
        .attr("transform", "translate(50,0)");

    svgAir.append("g")
        .attr("class","x axis")
        .attr("transform", "translate(50," + (height+20) + ")")
        .call(xAxis);

    svgAir.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(30,0)")
        .call(yAxisAir);

    svgAir.append("text")
        .text("Air Pollutant")
        .attr("x", 650)
        .attr("y", 90);
});
};

我的代码是否存在导致此问题的问题？哦，我也在使用crossfilter来格式化我的JSON数据。