<；的值无效；路径>；属性

本文关键字：gt 路径 属性 lt 无效 | 更新日期: 2023-09-27 18:24:48

我看到其他帖子有这个问题，但我似乎无法解决它。我是d3的新手，正在尝试将一些数据加载到折线图中，但我一直收到错误

Invalid value for <path> attribute d="MNaN,250LNaN,71.05263157894737LNaN,55.26315789473685

我已经设置了与示例中类似的所有内容（有效），但由于某种原因，这不起作用。我正在从一个Web服务中获取以下形式的数据列表：Date="1/1/2014"NumberOfActive=1（示例）。我试过使用解析函数，但它们并没有真正起作用。这是我的代码：

var data;
        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = 1000 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;
        function parseDateForViewing(d) {
            return d3.time.format('%b %Y')(d3.time.format('%m/%d/%Y').parse(d));
        }
        function parseDate(d) {
            return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d));
        }
        var x = d3.time.scale()
            .range([0, width]);
        var y = d3.scale.linear()
            .range([height, 0]);
        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");
        var line = d3.svg.line()
            .x(function (d) { return x(d.Date); })
            .y(function (d) { return y(d.NumberOfActive); });
        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/GetActiveLoansData",
            data: '',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (thedata) {
                var d = thedata.d;
                data = thedata.d;
                var _len = d.length;
                var post, i;
                for (i = 0; i < data.length; i++) {
                    d = data[i];
                    var t = parseDate(d.Date);
                    var s = d.Date;
                    x.domain(d3.extent(data, function (d) { return d.Date; }));
                    y.domain(d3.extent(data, function (d) { return d.NumberOfActive; }));
                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis);
                    svg.append("g")
                        .attr("class", "y axis")
                        .call(yAxis)
                        .append("text")
                        .attr("transform", "rotate(-90)")
                        .attr("y", 6)
                        .attr("dy", ".71em")
                        .style("text-anchor", "end")
                        .text("Closed Loans");
                    svg.append("path")
                        .datum(data)
                        .attr("class", "line")
                        .attr("d", line);
                }
            }
        });

<；的值无效；路径>；属性

在实际绘制图形之前，我需要用以下行转换日期：

for (i = 0; i < data.length; i++) {
                data[i].Date = parseDate(data[i].Date);
            }

这一行可以在以下最终代码中看到：

var data;
            var margin = { top: 20, right: 60, bottom: 30, left: 50 },
                width = 1000 - margin.left - margin.right,
                height = 300 - margin.top - margin.bottom;
            function parseDateForViewing(d) {
                return d3.time.format('%b %Y')(d3.time.format('%m/%d/%Y').parse(d));
            }
            function parseDate2(d) {
                return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d));
            }
            var parseDate = d3.time.format("%m/%d/%Y").parse;
            var x = d3.time.scale()
                .range([0, width]);
            var y = d3.scale.linear()
                .range([height, 0]);
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");
            var line = d3.svg.line()
                .x(function (d) { return x(d.Date); })
                .y(function (d) { return y(d.NumberOfActive); });
            var svg = d3.select("#svgsection").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            var d = thedata.d;
            data = thedata.d;
            var _len = d.length;
            var post, i;
            for (i = 0; i < data.length; i++) {
                data[i].Date = parseDate(data[i].Date);
            }
            for (i = 0; i < data.length; i++) {
                d = data[i];
                x.domain(d3.extent(data, function (d) { return d.Date; }));
                y.domain(d3.extent(data, function (d) { return d.NumberOfActive; }));
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("Closed Loans");
                svg.append("path")
                    .datum(data)
                    .attr("class", "line")
                    .attr("d", line);

                svg.append("text")
                .attr("x", (width / 2))
                .attr("y", 0 - (margin.top / 2) + 10)
                .attr("text-anchor", "middle")
                .style("font-size", "16px")
                .text("Closed Loans by Month");

我的代码也遇到了同样的问题。我发现这是因为如果没有价值，那么这个错误就会出现。我们必须检查我们使用的值，例如：if（！value）{value=correct_value；}

相关文章：