无法为 d3 折线图的标签获得正确的输出答案

【问题标题】：Can't get the right output for labels to d3 line graph无法为 d3 折线图的标签获得正确的输出
【发布时间】：2018-07-18 13:42:00
【问题描述】：

我是 D3 的新手，我正在尝试使用不同的数据格式复制 D3 Multi-Series Line Chart 示例。我只有“年”，而不是 x 轴的“月/年”格式。但我无法正确显示标签，而不是 2012、2013 等。我得到 .012、.013 等。

我尝试了不同的方法来解析日期并四处寻找解决方案，但我不知道如何获得正确的输出。

还有一件事是我想从右边开始一行，所以2012从2013的位置开始，但我不知道该怎么做。

谁能帮我解决这个问题？非常感谢！

这是代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
    /* opmaak linechart*/
path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.legend {
    font-size: 10px;
    /*font-weight: bold;*/
    text-anchor: middle;
}


</style>
<body>

<!-- load the d3.js library -->     
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var margin = {top: 40, right: 50, bottom: 50, left: 75},
    width = 500 - margin.left - margin.right,
    height = 275 - margin.top - margin.bottom;

    // Parse the date / time
//var parseDate = d3.timeParse("%y");
//var parseDate = d3.time.format("%Y");


var x = d3.scaleTime()
    .range([0, width]);  
var y = d3.scaleLinear()
    .range([height, 0]);

var chartOmzet = d3.select("body").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 + ")");

var omzetline = d3.line()   
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y(d.rev); });


d3.csv("rev.csv", function(error, data) {
  if (error) throw error;
  data.forEach(function(d) {
      //d.year = parseDate(d.year);
      //d.year = +d.year;
      d.rev = +d.rev;
    });

    x.domain(d3.extent(data, function(d) { return d.year; }));
    y.domain([0, d3.max(data, function(d) { return d.rev; })]);


    var dataNest = d3.nest()
        .key(function(d) {return d.symbol;})
        .entries(data);


    var color = d3.scaleOrdinal(d3.schemeCategory10);
    legendSpace = width/dataNest.length; // spacing for the legend */


    dataNest.forEach(function(d,i) { 
        chartOmzet.append("path")
            .attr("class", "line")
        .style("stroke", function() { // Add the colours dynamically
                return d.color = color(d.key); })
            .attr("d", omzetline(d.values));


        chartOmzet.append("text")
            .attr("x", (legendSpace/2)+i*legendSpace)  // space legend
            .attr("y", height + (margin.bottom/2)+ 15)
            .attr("class", "legend")    // style the legend
            .style("fill", function() { // Add the colours dynamically
                return d.color = color(d.key); })
            .text(d.key); 

    });
    // Add the X Axis
    chartOmzet.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
    // Add the Y Axis
    chartOmzet.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y));

    // Add a small label for the graph name.
    chartOmzet.append("text")
      .attr("class", "title")
      .attr("x", 10)
      .attr("y", -10)
      .attr("font-weight", "bold")
      .style("text-anchor", "start")
      .style("font-size", 10)
      .text("Rev Activities");  
});

</script>
</body>

这是数据：

symbol,year,rev
Services,2012,14.720
Services,2013,19.452
Services,2014,28.804
Services,2015,46.598
Services,2016,54.173
Goods,2012,53.908
Goods,2013,58.709
Goods,2014,55.175
Goods,2015,59.331
Goods,2016,55.985

这是输出：

【问题讨论】：

标签： html d3.js

【解决方案1】：

你有一些问题：

您没有解析日期；
说明符错误，应该是"Y"，而不是"y"；
为格式函数设置一个不同的名称（您不需要）；
使用.ticks(d3.timeYear)); 在轴上只显示年份，每年只显示一个刻度。

以下是这些更改的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  /* set the CSS */
  
  body {
    font: 12px Arial;
  }
  /* opmaak linechart*/
  
  path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  
  .legend {
    font-size: 10px;
    /*font-weight: bold;*/
    text-anchor: middle;
  }
</style>

<body>

  <!-- load the d3.js library -->
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script>
    var csv = `symbol,year,rev
Services,2012,14.720
Services,2013,19.452
Services,2014,28.804
Services,2015,46.598
Services,2016,54.173
Goods,2012,53.908
Goods,2013,58.709
Goods,2014,55.175
Goods,2015,59.331
Goods,2016,55.985`;

    var margin = {
        top: 40,
        right: 50,
        bottom: 50,
        left: 75
      },
      width = 500 - margin.left - margin.right,
      height = 275 - margin.top - margin.bottom;

    // Parse the date / time
    var parseDate = d3.timeParse("%Y");
    var formatDate = d3.timeFormat("%Y");


    var x = d3.scaleTime()
      .range([0, width]);
    var y = d3.scaleLinear()
      .range([height, 0]);

    var chartOmzet = d3.select("body").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 + ")");

    var omzetline = d3.line()
      .x(function(d) {
        return x(d.year);
      })
      .y(function(d) {
        return y(d.rev);
      });


    var data = d3.csvParse(csv);

    data.forEach(function(d) {
      d.year = parseDate(d.year);
      //d.year = +d.year;
      d.rev = +d.rev;
    });


    x.domain(d3.extent(data, function(d) {
      return d.year;
    }));
    y.domain([0, d3.max(data, function(d) {
      return d.rev;
    })]);


    var dataNest = d3.nest()
      .key(function(d) {
        return d.symbol;
      })
      .entries(data);


    var color = d3.scaleOrdinal(d3.schemeCategory10);
    legendSpace = width / dataNest.length; // spacing for the legend */


    dataNest.forEach(function(d, i) {
      chartOmzet.append("path")
        .attr("class", "line")
        .style("stroke", function() { // Add the colours dynamically
          return d.color = color(d.key);
        })
        .attr("d", omzetline(d.values));


      chartOmzet.append("text")
        .attr("x", (legendSpace / 2) + i * legendSpace) // space legend
        .attr("y", height + (margin.bottom / 2) + 15)
        .attr("class", "legend") // style the legend
        .style("fill", function() { // Add the colours dynamically
          return d.color = color(d.key);
        })
        .text(d.key);

    });
    // Add the X Axis
    chartOmzet.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x)
        .ticks(d3.timeYear));
    // Add the Y Axis
    chartOmzet.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y));

    // Add a small label for the graph name.
    chartOmzet.append("text")
      .attr("class", "title")
      .attr("x", 10)
      .attr("y", -10)
      .attr("font-weight", "bold")
      .style("text-anchor", "start")
      .style("font-size", 10)
      .text("Rev Activities");
  </script>
</body>

【讨论】：