Question

我遇到的问题是，当我在数组上调用.map时，我使用它返回'undefined'，但是当我在.map调用之前记录数组的内容时，它说数组不是未定义。

    $(document).ready(function(){
    var key = [];
    d3.xml("data.xml", function(error, data) {
        if (error) throw error;
        data = [].map.call(data.querySelectorAll("Names"), function(suspect) {
            return {
                name: suspect.querySelector("name").textContent
            }
        });
        for (var y = 0; y < data.length; y++) {
            key = Object.values(data[y]);
            LegendOptions[y] = key[0];
        };
    });

    var str1 = [null,null,null];
    var cntr = 0;
    d3.xml("data.xml", function(error, data) {
        if (error) throw error;
        data = [].map.call(data.querySelectorAll("element"), function(suspect) {
            return {
                axis: suspect.getAttribute("id"),
                value: +suspect.querySelector("value").textContent
            }
        });
        for (var y = 0; y < LegendOptions.length; y++) {
            str1 = [null,null,null]
            for (var i = 0; i < data.length/LegendOptions.length; i++) {
                str1[i] = data[cntr];
                cntr++;
            };
            d[y] = str1;
        };
    });
});
        var RadarChart = {
            draw: function(id, d, options){
                var cfg = {
                    radius: 5,
                    w: 600,
                    h: 600,
                    factor: 1,
                    factorLegend: .85,
                    levels: 3,
                    maxValue: 0,
                    radians: 2 * Math.PI,
                    opacityArea: 0.5,
                    ToRight: 5,
                    TranslateX: 80,
                    TranslateY: 30,
                    ExtraWidthX: 100,
                    ExtraWidthY: 100,
                    color: d3.scale.category10()
                };

                if('undefined' !== typeof options){
                    for(var i in options){
                        if('undefined' !== typeof options[i]){
                            cfg[i] = options[i];
                        }
                    }
                }
                cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i){return d3.max(i.map(function(o){return o.value;}))}));
                console.log(d);
                var allAxis = (d[0].map(function(i, j){return i.axis}));

最后一行是调用.map的地方，我得到了未定义的错误。此外，数组“d”存储在一个不同的文档中，稍后在html文件中调用该文档。

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
            <title>Radar chart</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="RadarChart.js"></script>
    <style>
    body {
        overflow: hidden;
        margin: 0;
        font-size: 18px;
        font-family: "Helvetica Neue", Helvetica;
    }

    #chart {
        position: absolute;
        top: 200px;
        left: 100px;
    }   
    </style>
</head>
<body>
    <div id="body">
        <div id="chart"></div>
    </div>
    <div data-role="fieldcontain" class="ui-hide-label" id="langDiv"></div>
    <script type="text/javascript" src="script.js"></script>

</body>
</form>
</html>

RadarChart.js是抛出错误的文件，并且正在调用.map。

Answer 1

等待d填充的一种可能解决方案是使用Promise进行异步加载

在下文中，我将两个d3.xml()合并，因为它似乎对我有意义！

var dataLoaded = new Promise(function(resolve, reject) {
    $(document).ready(function() {
        var tdata = [];
        var cntr = 0;
        d3.xml("data.xml", function(error, data) {
            if (error) {
                reject(error);
            }
            //
            [].forEach.call(data.querySelectorAll("Names"), function(suspect) {
                return {
                    name: suspect.querySelector("name").textContent
                }
            }).forEach(function(item) {
                var key = Object.values(item);
                LegendOptions[y] = key[0];
            };
            //
            var tdata = [].map.call(data.querySelectorAll("element"), function(suspect) {
                return {
                    axis: suspect.getAttribute("id"),
                    value: +suspect.querySelector("value").textContent
                }
            });
            LegendOptions.forEach(function() {
                var str1 = [null, null, null];
                for (var i = 0; i < tdata.length / LegendOptions.length; i++) {
                    str1[i] = tdata[cntr];
                    cntr++;
                };
                d[y] = str1;
            });
            //
            resolve(d);
        });
    });
});

var RadarChart = {
    draw: function(id, d, options) {
        dataLoaded.then(function() {
            var cfg = {
                radius: 5,
                w: 600,
                h: 600,
                factor: 1,
                factorLegend: .85,
                levels: 3,
                maxValue: 0,
                radians: 2 * Math.PI,
                opacityArea: 0.5,
                ToRight: 5,
                TranslateX: 80,
                TranslateY: 30,
                ExtraWidthX: 100,
                ExtraWidthY: 100,
                color: d3.scale.category10()
            };

            if ('undefined' !== typeof options) {
                for (var i in options) {
                    if ('undefined' !== typeof options[i]) {
                        cfg[i] = options[i];
                    }
                }
            }
            cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i) {
                return d3.max(i.map(function(o) {
                    return o.value;
                }))
            }));
            console.log(d);
            var allAxis = (d[0].map(function(i, j) {
                return i.axis
            }));
            //... you didn't post any more than this
        });
    }
}

在运行所有其他代码之前，如何确保生成数组？

1 个答案: