Question

这是我一直在尝试的代码....我想只显示日期，以便它适应x轴。我已经尝试使用时间戳作为数据和格式，但我仍然在xaxis上显示相同的时间戳。 `function InitChart（）{ 试试{

                                /* var x = document.getElementById('eventCountList1').innerHTML;
                                data = JSON.parse(x);
                                alert(data); */
                                /* var parseDate = d3.time
                                        .format("%d %b %Y %X").parse; */

                                var parseDate = d3.time
                                        .format("%Y-%m-%d %H:%M:%S").parse;

                                var data = [ {
                                    "count" : "92",
                                    "time" : "2016-02-08 05:50:27"
                                }, {
                                    "count" : "96",
                                    "time" : "2016-02-08 05:50:29"
                                }, {
                                    "count" : "94",
                                    "time" : "2016-02-08 05:50:30"
                                }, {
                                    "count" : "98",
                                    "time" : "2016-02-08 05:50:33"
                                } ];

                                data.forEach(function(d) {
                                    d.time = parseDate(d.time);
                                    d.count = +d.count;
                                });

                                alert(d3.min(data, function(d) {
                                    return d.time;
                                }));
                                alert(d3.max(data, function(d) {
                                    return d.time;
                                }));
                                /* alert(d3.min(data, function(d) {
                                    return d.count;
                                }));
                                alert(d3.max(data, function(d) {
                                    return d.count;
                                })); */

                                var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 300, MARGINS = {
                                    top : 20,
                                    right : 20,
                                    bottom : 20,
                                    left : 50
                                },

                                xScale = d3.scale
                                        .linear()
                                        .range([MARGINS.left,WIDTH- MARGINS.right ])
                                        .domain([(d3.min(data,function(d) {
                                                                            return d.time;
                                                                        })),
                                                (d3.max(data,function(d) {
                                                                            return d.time;
                                                                        })) ]),

                                yScale = d3.scale.linear().range(
                                        [ HEIGHT - MARGINS.top,
                                                MARGINS.bottom ]).domain(
                                        [ d3.min(data, function(d) {
                                            return d.count;
                                        }), d3.max(data, function(d) {
                                            return d.count;
                                        }) ]),

                                xAxis = d3.svg.axis().scale(xScale).orient(
                                        "bottom").ticks(7),

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

                                        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.svg.line().x(function(d) {
                                    return xScale(d.time);
                                }).y(function(d) {
                                    return yScale(d.count);
                                }).interpolate("linear");

                                vis.append('svg:path').attr('d',
                                        lineGen(data)).attr('stroke',
                                        'green').attr('stroke-width', 2)
                                        .attr('fill', 'none');
                                /* 
                                 vis.append('svg:path')
                                 .attr('d', lineGen(data2))
                                 .attr('stroke', 'blue')
                                 .attr('stroke-width', 2)
                                 .attr('fill', 'red'); 

                                var date = new Date(unix_timestamp*1000);
                                // Hours part from the timestamp
                                var hours = date.getHours();
                                // Minutes part from the timestamp
                                var minutes = "0" + date.getMinutes();
                                // Seconds part from the timestamp
                                var seconds = "0" + date.getSeconds();

                                // Will display time in 10:30:23 format
                                var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);


                                 */

                            } catch (ex) {
                                alert(ex);
                            }
                        }[the image is attached with x axis showing timestamps instead of date][1]`

请帮帮我......

Answer 1

使用刻度表格式标记刻度：

    xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
.ticks(7)
.tickFormat(d3.time.format("%d"));

我正在尝试构建一个d3js图，但在x轴上我得到时间戳而不是日期和时间，即使我使用格式化

1 个答案: