Javascript （D3折线图）错误：<；路径>；属性d：预期的数字；“南，南，南”；

我对D3.js很陌生。我正在尝试使用D3.js和angularjs构建一个折线图。我得到了上面的错误

我正在通过rest服务传递的控制台中的数据如下所示

    [{"id":1,"time":"Jun 19, 2017 13:17:21","ltp":9620.5,"time1":20170619},
    {"id":2,"time":"Jun 20, 2017 13:27:21","ltp":9617.7,"time1":20170620},
    {"id":3,"time":"Jun 21, 2017 13:36:51","ltp":9615.3,"time1":20170621}]

下面是我添加图表的控制器类代码

var niftyController = function($scope,$http, $state, $stateParams, $location){
    var niftyController = this;
    $scope.loadNiftyData = function(){
        $http.get('/nifty')
        .then(function successCallback(response){
            var responseNifty = JSON.parse(response.data);

            $scope.chartConfig={
                data:[{}]
            };

            $scope.chartConfig.data.push(responseNifty);
            console.log(response.data);

            var chartConfig = $scope.chartConfig;
            var svgConfig = { id:"mySvg", width:600, height:300, margin : { top: 20, right: 20, bottom: 20, left: 50 } };
            var bodySelection = d3.select("body"); var svgSelection = bodySelection.append("svg") .attr("id", svgConfig.id) .attr("width",svgConfig.width) .attr("height",svgConfig.height);

            xScale = d3.scale.linear() .range([ svgConfig.margin.left, svgConfig.width - svgConfig.margin.right ]) .domain([ d3.min(chartConfig.data, function(d) {return +d.time1;}), d3.max(chartConfig.data, function(d) {return +d.time1;}) ]);
            yScale = d3.scale.linear() .range([ svgConfig.height - svgConfig.margin.top, svgConfig.margin.bottom ]) .domain([ d3.min(chartConfig.data, function(d) {return +d.ltp;}), d3.max(chartConfig.data, function(d) {return +d.ltp;}) ]);

            xAxis = d3.svg.axis() .scale(xScale);
            yAxis = d3.svg.axis() .orient("left") .scale(yScale);

            svgSelection.append("svg:g") .attr("id","xAxis") .call(xAxis);
            d3.select("#xAxis") .attr("transform", "translate(0," + (svgConfig.height - svgConfig.margin.bottom) + ")");
            svgSelection.append("svg:g") .attr("id","yAxis") .call(yAxis);
            d3.select("#yAxis") .attr("transform", "translate(" + (svgConfig.margin.left) + ",0)");
            var lineSelection = d3.svg.line() .x(function(d){ return xScale(d.time1); }) .y(function(d){ return yScale(d.ltp) });
            svgSelection.append("svg:path") .attr('d', lineSelection(chartConfig.data)) .attr('stroke', 'green') .attr('stroke-width', 2) .attr('fill', 'none');

        }, function errorCallback(response) {

        });
    };
    $scope.loadNiftyData();
};

请引导我建立图表

var niftyController = function($scope,$http, $state, $stateParams, $location){
    var niftyController = this;
    $scope.loadNiftyData = function(){
        $http.get('/nifty')
        .then(function successCallback(response){
            var responseNifty = JSON.parse(response.data);

            $scope.chartConfig={
                data:[{}]
            };

            $scope.chartConfig.data.push(responseNifty);
            console.log(response.data);

            var chartConfig = $scope.chartConfig;
            var svgConfig = { id:"mySvg", width:600, height:300, margin : { top: 20, right: 20, bottom: 20, left: 50 } };
            var bodySelection = d3.select("body"); var svgSelection = bodySelection.append("svg") .attr("id", svgConfig.id) .attr("width",svgConfig.width) .attr("height",svgConfig.height);

            xScale = d3.scale.linear() .range([ svgConfig.margin.left, svgConfig.width - svgConfig.margin.right ]) .domain([ d3.min(chartConfig.data, function(d) {return +d.time1;}), d3.max(chartConfig.data, function(d) {return +d.time1;}) ]);
            yScale = d3.scale.linear() .range([ svgConfig.height - svgConfig.margin.top, svgConfig.margin.bottom ]) .domain([ d3.min(chartConfig.data, function(d) {return +d.ltp;}), d3.max(chartConfig.data, function(d) {return +d.ltp;}) ]);

            xAxis = d3.svg.axis() .scale(xScale);
            yAxis = d3.svg.axis() .orient("left") .scale(yScale);

            svgSelection.append("svg:g") .attr("id","xAxis") .call(xAxis);
            d3.select("#xAxis") .attr("transform", "translate(0," + (svgConfig.height - svgConfig.margin.bottom) + ")");
            svgSelection.append("svg:g") .attr("id","yAxis") .call(yAxis);
            d3.select("#yAxis") .attr("transform", "translate(" + (svgConfig.margin.left) + ",0)");
            var lineSelection = d3.svg.line() .x(function(d){ return xScale(d.time1); }) .y(function(d){ return yScale(d.ltp) });
            svgSelection.append("svg:path") .attr('d', lineSelection(chartConfig.data)) .attr('stroke', 'green') .attr('stroke-width', 2) .attr('fill', 'none');

        }, function errorCallback(response) {

        });
    };
    $scope.loadNiftyData();
};

---

提前谢谢。

我找到了解决这个问题的方法

在上面的代码中，$scope.chartConfig的实现是错误的。要实现的正确方法是

$scope.chartConfig = {data:responseNifty};

代替

$scope.chartConfig={
   data:[{}]
};
$scope.chartConfig.data.push(responseNifty);

---

您必须解析日期并使用时间刻度。您不能简单地执行

+d.time

，这不是一个包含数字的字符串。我分别使用“time1”和“ltp”表示x轴和y轴。“time1”和“ltp”包含数字。现在我看到了。不过，这不是最好的名字。对不起！对于名称：）请帮助我建立图表。多谢各位@Gerardofutadowell，你在其他地方有一个角度问题，因为代码的D3部分是正常的，创建了一条正常的路径。这是对您复制/粘贴的小数据的篡改：