Question

如何将x轴更改为DD-MM-YY之类的日期值？我的JSON数据如下：无论如何，我是否更改了x轴，以便它为我的文件中的每个JSON数据显示DD-MM-YY？我尝试使用％m /％d /％y但它不起作用我尝试使用％Y-％m-％d，但我的x轴显示的值不是％Y-％m-％d格式。那么，我怎么能够解决这个问题，以便我的x轴相应地显示日期值，或者我将如何更改我的JSON数据以便能够读取我的值？

ebolamortality.json

[{＆＃34;日期＆＃34;：＆＃34; 063014＆＃34;＆＃34; guineacase＆＃34;：＆＃34; 3＆＃34;＆＃34; guineadeath＆＃34 ;: ＆＃34; 5＆＃34;＆＃34;利比里亚：案例＆＃34;：＆＃34; 8＆＃34;，＆＃34;利比里亚：死亡＆＃34;：＆＃34; 7＆＃34;，＆＃34;塞拉利昂：案例＆＃34;：＆＃34; 11＆＃34;＆＃34;塞拉利昂 Leone：Death＆＃34;：＆＃34; 2＆＃34;，＆＃34;尼日利亚：案例＆＃34;：＆＃34; 0＆＃34;，＆＃34;尼日利亚：死亡＆＃34;：＆＃34 ; 0＆＃34;，＆＃34;总案例（西非）＆＃34;：＆＃34; 22＆＃34;，＆＃34;死亡总数（西非）＆＃34;：＆＃34; 14＆＃34;，＆＃34;累积案例＆＃34;：＆＃34; 22＆＃34;，＆＃34;累计死亡＆＃34;：＆＃34; 14＆＃34;}， {＆＃34;日期＆＃34;：＆＃34; 070214＆＃34;＆＃34; guineacase＆＃34;：＆＃34; 0＆＃34;＆＃34; guineadeath＆＃34;：＆＃34; 2＆＃34;＆＃34;利比里亚：案例＆＃34;：＆＃34; 8＆＃34;，＆＃34;利比里亚：死亡＆＃34;：＆＃34; 10＆＃34;，＆＃34;塞拉利昂：案例＆＃34;：＆＃34; 13＆＃34;＆＃34;塞拉利昂 Leone：Death＆＃34;：＆＃34; 2＆＃34;，＆＃34;尼日利亚：案例＆＃34;：＆＃34; 0＆＃34;，＆＃34;尼日利亚：死亡＆＃34;：＆＃34 ; 0＆＃34;，＆＃34;总案例（西非）＆＃34;：＆＃34; 21＆＃34;，＆＃34;死亡总数（西非）＆＃34;：＆＃34; 14＆＃34;，＆＃34;累积案例＆＃34;：＆＃34; 33＆＃34;，＆＃34;累计死亡＆＃34;：＆＃34; 28＆＃34;}]

我当前的网页

        <html>
        <head>
        </head>

        <body>
                <div id="chart1">
                <h4> Ebola New Cases</h4>
                </div>
        </body>
        <style>
        body {
          font: 10px sans-serif;
        }

        .hover {
          text-align: center;

        }
        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

        .x.axis path {
          display: black    ;
        }

        .line {
          fill: none;
          stroke: steelblue;
          stroke-width: 1.5px;

        }   

        h4 {
          text-align: center;
        }
        .d3-tip {
          line-height: 1;
          font-weight: bold;
          padding: 12px;
          background: rgba(0, 0, 0, 0.8);
          color: #fff;
          border-radius: 2px;
        }
        #chart1 {
        position: relative;
        border-style: solid;
        border-width: 2px;
        border-color: #CCC;
        border-collapse: collapse;
        height: 280px;
        width: 500px;
        float: left;
        }
        </style>
        <script src="http://d3js.org/d3.v3.js"></script>
            <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
        <script>
        var margin = { top: 30, right: 70, bottom: 30, left: 50 },
                width = 400 - margin.left - margin.right,
                height = 270 - margin.top - margin.bottom;

        var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {
            return "<p class='hover'>Male</p> </br> <strong>Age:</strong> <span style='color:white'>" + d.age + "</br><strong>Life Expectancy:</strong> <span style='color:white'>" + d.lifeexpectancymale + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.worldrankmale;
          });

        var tip1 = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {
            return "<p class='hover'>Female</p> <strong>Age:</strong> <span style='color:white'>" + d.age + "</br><strong>Life Expectancy:</strong> <span style='color:white'>" + d.lifeexpectancyfemale + "%" + "</span></br><strong>World Rank:</strong> <span style='color:white'>" + d.worldrankfemale;
          });
            var parseDate = d3.time.format("%d-%b-%y").parse;  

            var x = d3.scale.linear()
                .range([0, width]);

            var y = d3.scale.linear()
                .range([height, 0]);


            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom").ticks(5);

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left").ticks(5);

            var line = d3.svg.line()
                .x(function (d) { return x(d.date); })
                .y(function (d) { return y(d.guineacase); });

            var line2 = d3.svg.line()
                .x(function (d) { return x(d.date); })
                .y(function (d) { return y(d.guineadeath); });

            var svg = d3.select("#chart1").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 + ")");

            svg.call(tip).call(tip1);

            d3.json("ebolamortality.json", function (error, data) {
                data.forEach(function (d)
                {
                    d.date = parseDate(d.date.toString());
                    d.guineacase  = +d.guineacase;
                    d.guineadeath = +d.guineadeath;
                });

                x.domain(d3.extent(data, function (d) {
                  return d.date;
                }));

        /* Changed the y-axis range */      
                y.domain([d3.min(data, function (d) { return(d.guineacase)}), d3.max(data, function (d) { return(d.guineadeath)})]);

                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

                svg.append("text")      // text label for the x axis
                  .attr("x", 155)
                  .attr("y", 235)
                  .style("text-anchor", "middle")
                  .text("Date");

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                  .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("Guinea");

                svg.append("path")
                    .datum(data)
                    .attr("class", "line")
                    .style("stroke", "red")
                    .attr("d", line(data));

                svg.append("path")
                    .datum(data)
                    .attr("class", "line")
                    .style("stroke", "black")
                    .attr("d", line2(data));

                svg.selectAll('.yaxis1')
                    .data(data)
                    .enter()
                    .append('circle')
                    .attr('class', 'yaxis1')
                    .attr('cx', function (datum) {
                    return x(datum.date)
                    })
                    .attr('cy', function (datum) {
                    return y(datum.guineacase)
                    })
                    .attr('r', 3)
                    .attr('fill', 'red')
                    .on('mouseover', tip.show)
                    .on('mouseout', tip.hide);

                    svg.selectAll('.yaxis2')
                    .data(data)
                    .enter()
                    .append('circle')
                    .attr('class', 'yaxis2')
                    .attr('cx', function (datum) {
                    return x(datum.date)
                    })
                    .attr('cy', function (datum) {
                    return y(datum.guineadeath)
                    })
                    .attr('r', 3)
                    .attr('fill', 'black')
                    .on('mouseover', tip1.show)
                    .on('mouseout', tip1.hide);
            });
        </script>
        </html>

Answer 1

以下为您提供x轴上所需的DD-MM-YY输出格式。结果是最终结果，但我相信你可以弄清楚如何解决这个问题。

var outFormat = d3.time.format("%d-%m-%y");
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).tickFormat(outFormat);

关键是使用适当的 d3.time.format 设置 tickFormat 。您的示例代码的parseDate也不适用于所提供的JSON。这很有效。

var parseDate = d3.time.format("%d%m%y").parse;

如何将x轴更改为日期格式？

1 个答案: