我正在尝试创建我的第一个d3.js条形图,但以下代码返回错误 Error: attribute height: Expected length, "NaN" . 我从一个模板中取这个例子,只替换json数据和x.domain和y.domain以满足我的需要 .

要提供的json数据如下

d:{[
    {
    "BalanceDate":"2018-02-02T00:00:00",
    "IdAdvisor":191,
    "Balance":16753281
    },
    {
    "BalanceDate":"2018-02-01T00:00:00",
    "IdAdvisor":191,
    "Balance":16753207
    },
    {
    "BalanceDate":"2018-01-31T00:00:00",
    "IdAdvisor":191,
    "Balance":16753120
    },
    {
    "BalanceDate":"2018-01-30T00:00:00",
    "IdAdvisor":191,
    "Balance":16753065
    },
    {
    "BalanceDate":"2018-01-29T00:00:00",
    "IdAdvisor":191,
    "Balance":16753503
    }
]}

这是应该创建图表的功能

function fillAssetChart() {
            var parseDate = d3.time.format("%Y-%m-%d").parse;
            $.ajax({
                url: "xyz.asmx/getb",
                data: "",
                dataType: "json",
                async:false,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var jsonData = jQuery.parseJSON(data.d);
                    $.each(jsonData,
                        function (i, item) {
                            bardata.push({ bdate: parseDate(item.BalanceDate.substring(0, 10)), bvalue: item.Balance });
                        });
                },
                error: function (jo, txt, errmsg) {
                    var msg = getResource('generic_ajax_error');
                    showNotify(msg, 'danger', 'Server Error', 'icon-warning');
                    msg += " " + txt + " " + errmsg + ' ' + formatJqXhrMsg(jo);
                    sendJsError(null, msg);
                    return false;
                }
            });

            var d3Container = d3.select("#total-assets"), width = d3Container.node().getBoundingClientRect().width;

            var x = d3.scale.ordinal().rangeBands([0, width], .05);
            var y = d3.scale.linear().range([40, 0]);

            x.domain(bardata.map(function (d) {
                return d.bdate;
            }));
            y.domain([0, d3.max(bardata, function (d) {
                return d.bvalue;
            })]);

            var container = d3Container.append('svg');
            var svg = container
                .attr('width', width)
                .attr('height', 40)
                .append('g');
            var bars = svg.selectAll('rect')
                .data(bardata)
                .enter()
                .append('rect')
                .attr('class', 'd3-random-bars')
                .attr('width', x.rangeBand())
                .attr('x',
                function (d, i) {
                    return x(i);
                })
                .style('fill', "#EC407A");
            var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-10, 0]);

            bars.call(tip)
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide);
            tip.html(function (d, i) {
                return "<div class='text-center'>" +
                    "<h6 class='no-margin'>" +
                    d +
                    "</h6>" +
                    "<span class='text-size-small'>EUR</span>" +
                    "<div class='text-size-small'>" +
                    i +
                    "</div>" +
                    "</div>";
            });

            withAnimation();

            function withAnimation() {
                bars
                    .attr('height', 0)
                    .attr('y', 40)
                    .transition()
                    .attr('height', function (d) {
                        return y(d);
                    })
                    .attr('y', function (d) {
                        return 40 - y(d);
                    })
                    .delay(function (d, i) {
                        return i * 50;
                    })
                    .duration(1200)
                    .ease('elastic');
            }
        }

javascriptr控制台中的错误重复了几次 .

任何帮助将非常感激 .

谢谢