X 轴标签（日期）未正确显示 D3 v4答案

【问题标题】：X-axis labels(Date) is not coming properly D3 v4X 轴标签（日期）未正确显示 D3 v4
【发布时间】：2018-12-04 19:24:26
【问题描述】：

我正在使用 d3 v4 版本制作折线图。 X 轴标签为日期（仅年份）。 X 轴标签未正确显示。

它相互重叠。我只想在 x-aaxis 标签中显示年份。我尝试使用 d3.timeparse 仍然值不正确。

帮助我了解问题。

codepen 链接 -https://codepen.io/pinkisharma/pen/oyPzWW

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

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

</style>
<body>

<!-- load the d3.js library -->     
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    initLineChart();
    function initLineChart(){
        // set the dimensions and margins of the graph
        var margin = {top: 20, right: 40, bottom: 30, left: 50},
            width = 450 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom;

        // parse the date / time
        var parseTime = d3.timeParse("%Y");
        var data =[{"date":"2014","EPS":"34.13","EBITDA":"34.12"},{"date":"2015","EPS":"63.98","EBITDA":"45.56"},{"date":"2016","EPS":"67.00","EBITDA":"54.00"},
                  {"date":"2017","EPS":"45.00","EBITDA":"22.17"},{"date":"2018","EPS":"18.32","EBITDA":"24.13"}];
        // set the ranges
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);


        // define the 1st line
        var valueline = d3.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.EBITDA); });

        // define the 2nd line
        var valueline2 = d3.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.EPS); });

        // append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
            .attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
            .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");

        // Get the data
          // format the data
          data.forEach(function(d) {
              d.date = parseTime(d.date);
              d.EBITDA = +d.EBITDA;
              d.EPS = +d.EPS;
          });

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

          // Add the valueline path.
          svg.append("path")
              .data([data])
              .attr("class", "line")
              .style("stroke", "#00357F")
              .style("fill", "none")
              .style("stroke-width", "3px")
              .attr("d", valueline);

          // Add the valueline2 path.
          svg.append("path")
              .data([data])
              .attr("class", "line")
              .style("stroke", "#006600")
              .style("fill", "none")
              .style("stroke-width", "3px")
              .attr("d", valueline2);

          // 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));
         // Add the scatterplot
          svg.selectAll("dot")
              .data(data)
              .enter().append("circle")
              .attr("r", 5)
              .style("fill", "#00357F")
              .attr("cx", function(d) { return x(d.date); })
              .attr("cy", function(d) { return y(d.EBITDA); });
        // Add the scatterplot
          svg.selectAll("dot")
              .data(data)
              .enter().append("circle")
              .attr("r", 5)
              .style("fill", "#006600")
              .attr("cx", function(d) { return x(d.date); })
              .attr("cy", function(d) { return y(d.EPS); });


    }

</script>
</body>

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您可以使用.ticks(n) 向轴渲染器提示要绘制的大致刻度数。由于您希望每年显示一次刻度，而不是尝试自己手动计算n 的值，您可以使用d3.timeYear.every(1)¹ 来计算年数。

p/s：附加提示：由于您只关心显示年份，您可能还想使用.tickFormat() 来确保只显示年份：

svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(d3.timeYear.every(1)));

initLineChart();

function initLineChart() {
  // set the dimensions and margins of the graph
  var margin = {
      top: 20,
      right: 40,
      bottom: 30,
      left: 50
    },
    width = 450 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

  // parse the date / time
  var parseTime = d3.timeParse("%Y");
  var data = [{
      "date": "2014",
      "EPS": "34.13",
      "EBITDA": "34.12"
    }, {
      "date": "2015",
      "EPS": "63.98",
      "EBITDA": "45.56"
    }, {
      "date": "2016",
      "EPS": "67.00",
      "EBITDA": "54.00"
    },
    {
      "date": "2017",
      "EPS": "45.00",
      "EBITDA": "22.17"
    }, {
      "date": "2018",
      "EPS": "18.32",
      "EBITDA": "24.13"
    }
  ];
  // set the ranges
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);


  // define the 1st line
  var valueline = d3.line()
    .x(function(d) {
      return x(d.date);
    })
    .y(function(d) {
      return y(d.EBITDA);
    });

  // define the 2nd line
  var valueline2 = d3.line()
    .x(function(d) {
      return x(d.date);
    })
    .y(function(d) {
      return y(d.EPS);
    });

  // append the svg obgect to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("viewBox", "0 0 " + (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom))
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

  // Get the data
  // format the data
  data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.EBITDA = +d.EBITDA;
    d.EPS = +d.EPS;
  });

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

  // Add the valueline path.
  svg.append("path")
    .data([data])
    .attr("class", "line")
    .style("stroke", "#00357F")
    .style("fill", "none")
    .style("stroke-width", "3px")
    .attr("d", valueline);

  // Add the valueline2 path.
  svg.append("path")
    .data([data])
    .attr("class", "line")
    .style("stroke", "#006600")
    .style("fill", "none")
    .style("stroke-width", "3px")
    .attr("d", valueline2);

  // Add the X Axis
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y")).ticks(d3.timeYear.every(1)));

  // Add the Y Axis
  svg.append("g")
    .call(d3.axisLeft(y));
  // Add the scatterplot
  svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 5)
    .style("fill", "#00357F")
    .attr("cx", function(d) {
      return x(d.date);
    })
    .attr("cy", function(d) {
      return y(d.EBITDA);
    });
  // Add the scatterplot
  svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 5)
    .style("fill", "#006600")
    .attr("cx", function(d) {
      return x(d.date);
    })
    .attr("cy", function(d) {
      return y(d.EPS);
    });


}

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

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

脚注：

查看d3.timeYear()和interval.every()的使用

【讨论】：

谢谢@Terry...这正是我想要的。 :-)
你能指导我如何在点上添加数据点吗？