Question

这是令人费解的，我是d3的新手，所以设法让它工作，但我正在努力，因为当我的数据跨越328个数据点时，SVG根本不显示我的路径/线。这里是jsFiddle working vs not working（唯一不同的是加载不同的jsons，只有一个数据点）。

代码很简单，我已经放了工作和不工作的jsons，只需更改行d3.json(jsonNotWorking, function(error, j) {并将jsonNotWorking替换为jsonWorking。这两个json数据集之间的区别在于，一个有328个数据点，另外有329个数据点。

提前感谢您的帮助。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>                 
path {
    stroke-width: 1px;
    fill: none;
    stroke: red;
}

line {
    fill: none;
    stroke: grey;
    shape-rendering: auto;
    stroke-width: 1px;    
}
</style>   
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
    <script>
        var slice = null, margin = {top: 20, right: 20, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        // parse the date / time
        var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%L%Z");

        // set the ranges
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);

        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 + ")");

        // Get the data
        var jsonNotWorking = "https://zutoraldiag377.blob.core.windows.net/tmp/noworkie.json";
        var jsonWorking = "https://zutoraldiag377.blob.core.windows.net/tmp/workie.json"

        d3.json(jsonNotWorking, function(error, j) {

            if (error) {
                throw error;
            }

            try{
                data = j.slices;

                // format date
                for(p in data){
                    slice = data[p];
                    slice.date = parseTime(slice.cutTaken);
                }

                // sort out scalingo
                var totalReqsMax = d3.max(data, function(d){ return d.totalRequests; });
                var totalReqsScale = Math.floor(Math.log10(totalReqsMax));

                // lines __________________
                var totalReqsLine = d3.line()
                .x(function(d) { 
                    return x(d.date); 
                })
                .y(function(d) { 
                    return y(d.totalRequests / Math.pow(10, totalReqsScale)); 
                });

                // Scale the range of the data
                x.domain(d3.extent(data, function(d) { return d.date; }));          
                y.domain([0, 10]);

                // paths ____________________
                svg.append("path")
                    .data([data])
                    .attr("class", "line")
                    .attr("d", totalReqsLine);


                // Add the X Axis
                svg.append("g")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisBottom(x));

                // Add the Y Axis
                svg.append("g")
                    .call(d3.axisLeft(y));

            }
            catch (e){
                console.log(e);
            }
        });        
</script>  
</body>
</html>

Answer 1

由于您的上一个数据项具有不同的日期格式（请参见图片，没有毫秒），因此无法正常工作。所以你无法解析它：

var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S.%L%Z");

如果您可以编辑此JSON文件，我建议您更改此值。但是如果你不能改变它，你应该为这个数据项使用另一个%Y-%m-%dT%H:%M:%S%Z解析函数（参见my fork of your fiddle）。它仅适用于这种情况（当最后一个项目具有不同的格式时）。如果您的数据集在此期间发生更改，则数据集的所有项目必须具有相同的日期格式。

d3路径仅显示路径/线路，最多328个点，而不是329个或更多

1 个答案: