d3.js图表​​没有显示

Question

我有一个查询数据的图表控制器类。当我使用{！series1} {！xAxis}和{！barChart}调用变量时，apex页面将获取数据。无法弄清楚为什么我的图表不会显示。

<apex:page controller="ChartController">
<div id="chart" style="min-width: 310px; height: 400px; margin: 0 auto"><svg></svg></div>

<script src="{!$Resource.ipx_jquery214minjs}"></script>
<script src="{!$Resource.ipx_d3js}"></script> 
<script src="{!$Resource.ipx_nvd3}"></script> 

<script type="text/javascript">
    nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
            .x({!xAxis})
            .y({!series1})
            .staggerLabels(true)
            .showValues(true)
            .duration(1000)
            ;
        d3.select('#chart svg')
            .data({!barChart})
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });
</script>
</apex:page>

ChartController

public class ChartController {
    private String xAxis;
    private String series1;
    private String barChart;

    public ChartController() {
        List<inv_Portfolio__c> portfolios = [SELECT Name, market_value__c,
                                           type__c
                                           FROM inv_Portfolio__c
                                           ORDER BY as_of__c];
        Map <String, Decimal> barData = new Map<String, Decimal>();
        List <String> xAxisValues = new List<String>();
        List <Decimal> series1Values = new List<Decimal>();
        for(inv_Portfolio__c p: portfolios){
               String name = p.Name;
               xAxisValues.add(name);
               series1Values.add(p.market_value__c);
               barData.put(name, p.market_value__c);
        }
        xAxis = JSON.serialize(xAxisValues);
        series1 = JSON.serialize(series1Values);
        barChart = JSON.serialize(barData);
    }

    public String getxAxis() {
        return xAxis; 
    }

    public String getSeries1() {
        return series1;
    }

    public String getBarChart() {
        return barChart;
    }    
}