Question

我试图访问d3 js中的日期和一些值。分享我的小提琴，任何人都可以帮我纠正我的代码，任何人都可以告诉我错误。

<!DOCTYPE html>
<html>
<head>
 <title>trial</title>
    <link rel="stylesheet" href="css/style.css">
     <body>
     <svg id="visualisation" width="1000" height="500"></svg>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' ></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>

     <script src="js/index.js"></script>
     </body>
</html>

https://jsfiddle.net/c6jf5yg0/6/

观察：属性ID在broswers中无法正常计算。提前谢谢

Answer 1

Path元素属性值有NaN firefox是第一个根本原因。

<path d="MNaN,20LNaN,240.23584905660306LNaN,480" stroke="blue" stroke-width="2" fill="none"/>

为什么要更新NaN？

在X Range的范围函数中，如下所示。

d3.extent(lineData, function(d) {
 return new Date(d.x);
  // new Date("2016-01-08 03:01:19.418110");
  // Firefox output Date {Invalid Date}
  // Chrome it works.
})

如何解决此问题？

更新您的lineData，如下所示。在日期和时间之间添加T.

var lineData = [{
            "x": "2016-01-08T03:01:19.418110",
            "y": 0.8076999999999999
        }, {
            "x": "2016-01-08T05:10:19.838509",
            "y": 0.692666666666667
        }, {
            "x": "2016-01-08T09:54:13.022163",
            "y": 0.5674333333333333
        }];

工作截图：

Answer 2

在日期和时间之间添加“T”，即List<String> Items = Jurisdiction.Split(","); Items.Remove( lblJurisdiction.Text); string NewX = String.Join(",", Items.ToArray());
http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15
http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.4.2

工作演示：

ECMA Specification

        InitChart();

        function InitChart() {

        var lineData = [{
                    "x": "2016-01-08T03:01:19.418110",
                    "y": 0.8076999999999999
                }, {
                    "x": "2016-01-08T05:10:19.838509",
                    "y": 0.692666666666667
                }, {
                    "x": "2016-01-08T09:54:13.022163",
                    "y": 0.5674333333333333
                }];

            var vis = d3.select("#visualisation"),
                WIDTH = 1000,
                HEIGHT = 500,
                MARGINS = {
                    top: 20,
                    right: 20,
                    bottom: 20,
                    left: 50
                },

                xRange = d3.time.scale()
                .range([MARGINS.left, WIDTH - MARGINS.right])
                .domain(d3.extent(lineData, function(d) {
                    return new Date(d.x);
                })),

                yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
                        return d.y;
                    }),
                    d3.max(lineData, function(d) {
                        return d.y;
                    })
                ]),

                xAxis = d3.svg.axis()
                .scale(xRange)
                .tickSize(5)
                .tickSubdivide(true)
                .tickFormat(d3.time.format('%X')),

                yAxis = d3.svg.axis()
                .scale(yRange)
                .tickSize(5)
                .orient("left")
                .tickSubdivide(true);


            vis.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                .call(xAxis);

            vis.append("svg:g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                .call(yAxis);

            var lineFunc = d3.svg.line()
                .x(function(d) {
                    return xRange(new Date(d.x));
                })
                .y(function(d) {
                    return yRange(d.y);
                })
                .interpolate('linear');

            vis.append("svg:path")
                .attr("d", lineFunc(lineData))
                .attr("stroke", "blue")
                .attr("stroke-width", 2)
                .attr("fill", "none");

        }

D3 Graph工作在铬中，但不在其他浏览器中工作

2 个答案:

为什么要更新NaN？

如何解决此问题？

工作截图：

工作演示：