d3錯誤在x軸折線圖上顯示日期時間

Question

我正在使用d3.js實現一個多行系列圖表，當我嘗試從進入的數據中繪制我的dateTime時，我收到一個錯誤指向我的x軸。“錯誤：屬性d：預期數字，”MNaN，376.88020650 ......“”

這是我的功能

var data =   [{
"Brand": "Toyota", 
"Count": 1800, 
"Time": "2017-04-02 16"},
{
"Brand": "Toyota",
"Count": 1172,
"Time": "2017-04-02 17"},
{
"Brand": "Toyota",
"Count": 2000,
"Time": "2017-04-02 18"},
{
"Brand": "Honda",
"Count": 8765,
"Time": "2017-04-02 16"},
{
"Brand": "Honda",
"Count": 3445,
"Time": "2017-04-02 17"},
{
"Brand": "Honda",
"Count": 1232,
"Time": "2017-04-02 18"}
]

 var dataGroup = d3.nest()    //d3 method that groups data by Brand  
                    .key(function(d) {return d.Brand;})
                    .entries(data);
                console.log(JSON.stringify(dataGroup));

//var color = d3.scale.category10();
                var vis = d3.select("#visualisation"),
                    WIDTH = 1000,
                    HEIGHT = 500,
                    MARGINS = {
                        top: 50,
                        right: 20,
                        bottom: 50,
                        left: 50
                    },
        xScale = d3.scaleLinear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) {   //set up x-axis based on data
                        return d.Time;
                    }), d3.max(data, function(d) {
                        return d.Time;
                    })]),

        yScale = d3.scaleLinear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) {    //set up y-axis based on data
                        return d.Count;
                    }), d3.max(data, function(d) {
                        return d.Count;
                    })]),

                    xAxis = d3.axisBottom()
                        .scale(xScale),
                    yAxis = d3.axisLeft()
                    .scale(yScale)

                    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 lineGen = d3.line()
                    .x(function(d) {
                        return xScale(d.Time);
                    })
                    .y(function(d) {
                        return yScale(d.Count);
                    })
                    .curve(d3.curveBasis);

                dataGroup.forEach(function(d,i) {   //iterate over the dataGroup and create line graph for each brand
                    vis.append('svg:path')
                    .attr('d', lineGen(d.values))
                    .attr('stroke', function(d,j) { 
                            return "hsl(" + Math.random() * 360 + ",100%,50%)";     //random color for each brand line on graph
                    })
                    .attr('stroke-width', 2)
                    .attr('id', 'line_'+d.key)
                    .attr('fill', 'none');

                    lSpace = WIDTH/dataGroup.length;   //define the legend space based on number of brands
                    vis.append("text")
                        .attr("x", (lSpace/2)+i*lSpace)
                        .attr("y", HEIGHT)
                        .style("fill", "black")
                        .attr("class","legend")
                        .on('click',function(){
                            var active   = d.active ? false : true;
                            var opacity = active ? 0 : 1;
                            d3.select("#line_" + d.key).style("opacity", opacity);
                            d.active = active;
                        })
                        .text(d.key);
                });

我的日期是yyyy-mm-dd HH格式，我想要完成的是例如：

• “時間”：“2017-04-02 16”在x軸上轉換為“April 02”，並將小時（HH）顯示為工具提示......等

這是一個jsfiddle鏈接https://jsfiddle.net/rsov2s2s/任何幫助表示贊賞。

Answer 1

在數據對象中， Time只是一個字符串。 因此，您必須將其解析為實際日期：

data.forEach(function(d){
    d.Time = d3.timeParse("%Y-%m-%d %H")(d.Time)
});

在此函數中， d3.timeParse使用"%Y-%m-%d %H"作為說明符，它與字符串的結構相匹配。

之后，不要忘記將xScale從scaleLinear更改為scaleTime 。

以下是僅包含這些更改的代碼：

 var data = [{ "Brand": "Toyota", "Count": 1800, "Time": "2017-04-02 16" }, { "Brand": "Toyota", "Count": 1172, "Time": "2017-04-02 17" }, { "Brand": "Toyota", "Count": 2000, "Time": "2017-04-02 18" }, { "Brand": "Honda", "Count": 8765, "Time": "2017-04-02 16" }, { "Brand": "Honda", "Count": 3445, "Time": "2017-04-02 17" }, { "Brand": "Honda", "Count": 1232, "Time": "2017-04-02 18" }]; data.forEach(function(d) { d.Time = d3.timeParse("%Y-%m-%d %H")(d.Time) }); var dataGroup = d3.nest() //d3 method that groups data by Brand .key(function(d) { return d.Brand; }) .entries(data); //var color = d3.scale.category10(); var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 500, MARGINS = { top: 50, right: 20, bottom: 50, left: 50 }, xScale = d3.scaleTime().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) { //set up x-axis based on data return d.Time; }), d3.max(data, function(d) { return d.Time; })]), yScale = d3.scaleLinear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) { //set up y-axis based on data return d.Count; }), d3.max(data, function(d) { return d.Count; })]), xAxis = d3.axisBottom() .scale(xScale), yAxis = d3.axisLeft() .scale(yScale) 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 lineGen = d3.line() .x(function(d) { return xScale(d.Time); }) .y(function(d) { return yScale(d.Count); }) .curve(d3.curveBasis); dataGroup.forEach(function(d, i) { //iterate over the dataGroup and create line graph for each brand vis.append('svg:path') .attr('d', lineGen(d.values)) .attr('stroke', function(d, j) { return "hsl(" + Math.random() * 360 + ",100%,50%)"; //random color for each brand line on graph }) .attr('stroke-width', 2) .attr('id', 'line_' + d.key) .attr('fill', 'none'); lSpace = WIDTH / dataGroup.length; //define the legend space based on number of brands vis.append("text") .attr("x", (lSpace / 2) + i * lSpace) .attr("y", HEIGHT) .style("fill", "black") .attr("class", "legend") .on('click', function() { var active = d.active ? false : true; var opacity = active ? 0 : 1; d3.select("#line_" + d.key).style("opacity", opacity); d.active = active; }) .text(d.key); }); 

  .axis path { fill: none; stroke: #777; shape-rendering: crispEdges; } .axis text { font-family: Lato; font-size: 13px; } .legend { font-size: 14px; font-weight: bold; cursor: pointer; 

 <title>D3 Test</title> <script src="https://d3js.org/d3.v4.js"></script> <body> <svg id="visualisation" width="1000" height="600"></svg> <script src="InitChart.js"></script> </body>