Question

我没有从D3.js承诺中得到任何数据。如果我用一个对象列表创建一个变量并将其用于我的数据，则以下代码有效。但是，当我尝试使用d3.csv创建相同名称的变量时，控制台中什么也没有。我刚收到“承诺{}。请帮忙。谢谢。

<script>
            var h = 350;
            var w = 500;

        var monthlySales;

        var loadData = () => { 
            return d3.csv("data/MonthlySales.csv")
                    .then( (d) => { monthlySales = d } ) };

        loadData();
        console.log(monthlySales);

            // var monthlySales = [
            //     {"month":10, "sales":100},
            //     {"month":20, "sales":130},
            //     {"month":30, "sales":250},
            //     {"month":40, "sales":300},
            //     {"month":50, "sales":265},
            //     {"month":60, "sales":225},
            //     {"month":70, "sales":180},
            //     {"month":80, "sales":120},
            //     {"month":90, "sales":145},
            //     {"month":100, "sales":130},
            // ];

            var lineFun = d3.line()
                .x((d) => d.month*3)
                .y((d) => h - d.sales)
                .curve(d3.curveLinear);

            var svg = d3.select("body").append("svg")
                .attr("width", w)
                .attr("height", h);

            var viz = svg.append("path")
                .attr("d", lineFun(monthlySales))
                .attr("stroke", "purple")
                .attr("stroke-width", 2)
                .attr("fill", "none");

            var labels = svg.selectAll("text")
                .data(monthlySales)
                .enter()
                .append("text")
                .text((d) => d.sales)
                .attr("x", (d) => d.month*3-25)
                .attr("y", (d) => h - d.sales)
                .style("font-size", "12px")
                .style("font-family", "sans-serif")
                .attr("fill", "#666666")
                .attr("text-anchor", "start")
                .attr("dy", ".35em")
                .attr("font-weight", function(d,i) { 
                    if (i === 0 || i ==(monthlySales.length-1) ) {
                        return "bold";
                    } else { return "normal"; }
                });
        </script>

Answer 1

在我对上一个问题https://stackoverflow.com/a/57205820/3252752的回答的基础上，您可以通过以下两种方法进行操作：

这两种方法都要求您将loadData();之后的所有代码放入Promise解析后执行的结构中。

最简单的方法是将loadData函数更改为此：

var loadData = () => { 
    return d3.csv("data/MonthlySales.csv")
            .then( (d) => { 
                monthlySales = d;
                /* Put all code after 'loadData();' here */
            } 
        )};

loadData();        
/* Take all remaining code from after here */

更好的方法是将代码放入单独的函数中

var doViz = () => {
    /* Put all code after 'loadData();' here */
}

var loadData = () => { 
    return d3.csv("data/MonthlySales.csv")
            .then( (d) => { 
                monthlySales = d;
                doViz();
            } 
        )};

loadData();
/* Take all remaining code from after here */

D3.csv不会返回数据，且承诺未决

1 个答案: