nvd3 图表仅在调整大小后显示

Question

我遇到了一个问题，我的图表仅在浏览器调用调整大小事件后才会呈现。

在调整大小事件之后，它看起来正是我想要的样子。 我正在使用 d3.csv 加载数据，我怀疑这可能与它有关，但我真的不知道。 我正在使用 d3 3.5.6 和 nvd3 1.8.1

我在本地使用 python -m SimpleHTTPServer 服务

这是我用来创建图表的 javascript：

nv.addGraph(function () {
    var chart = nv.models.lineChart()
        .useInteractiveGuideline(true);
    chart.duration(0)
        .margin({
        left: 100,
        bottom: 100
    })
        .x(function (d) {
        return d.financial_year
    })
        .y(function (d) {
        return d.real_expenditure_millions
    })
        .forceY([0]);
    chart.xAxis.axisLabel("Financial Year ");
    chart.yAxis.axisLabel('Expenditure (millions)');
    chart.showXAxis(true);

    myData = getData();
    d3.select(".chart")
        .datum(myData)
        .attr("id", function (d) { console.log(d); })
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

这是我的 getData 函数，它也用于更新页面上的表格：

function getData() {
    var myData = [];
    d3.csv("data.csv", function (data) {
        var table = d3.select("table");
        var row = table.append("thead").append("tr")
        row.append("th").text("financial year");
        row.append("th").text("Real Expenditure (millions)");
        table = table.append("tbody");
        for (d in data) {
            var year = data[d].financial_year;
            var expenditure = data[d].real_expenditure_millions;
            row = table.append("tr");
            row.append("td").text(year);
            row.append("td").text(expenditure);

            myData.push({
                financial_year: +(year.substr(0, 4)),
                real_expenditure_millions: +expenditure
            });
        }
    });
    return [{
        values: myData,
        key: "Federal Government Dental Expenditure in NSW",
        color: "#ff7f0e"
    }];
}

data.csv 看起来像

financial_year,real_expenditure_millions
1997-98,60
1998-99,115
1999-00,144
2000-01,177
2001-02,182
2002-03,175
2003-04,169
2004-05,177
2005-06,183
2006-07,189
2007-08,280
2008-09,479
2009-10,578
2010-11,613
2011-12,660

图表仅在浏览器控制台中的window.dispatchEvent(new Event('resize')); 之后显示。

Answer 1

我最终不得不通过在 nv.addGraph 之外调用我的 get data 函数来加载数据