Question

我目前正在制作一个显示6个月以上数据的折线图。我已经将图表设置得很好但我现在的问题是让底部的轴表示月份，每个图表与月份一致。

作为参考，我已经按顺序放置了一个数据数组，以及用于该行的数据数组。每个月对应于相应的数据（例如，数组中的第一个数据=数组中的第一个月）。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <style type="text/css">
    h1 {
      font-size: 35px;
      color: darkblue;
      font-family: Helvetica;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }

    path {
      stroke: steelblue;
      stroke-width: 1;
      fill: none;
    }
    
    body{
      font-family: sans-serif;
    }


    .axis {
      shape-rendering: crispEdges;
    }

    .x.axis line {
      stroke: lightgrey;
    }

    .x.axis .minor {
      stroke-opacity: .5;
    }

    .x.axis path {
      display: none;
    }

    .y.axis line, .y.axis path {
      fill: none;
      stroke: #000;
    }

  </style>
</head>

<body>
  <h1>Resources used per Month</h1>

    <script type="text/javascript">
    var m = [80, 80, 80, 80]; // margins
    var w = 1000 - m[1] - m[3]; // width
    var h = 400 - m[0] - m[2]; // height

    var dataArrayMonths = ['April', 'May', 'June', 'July', 'August', 'September']
    var data = [1.5, 1.5, 1.5, 3.6, 3.6, 2.7,];

    var x = d3.scale.linear().domain([0, data.length]).range([0, w]);

    var y = d3.scale.linear().domain([0, 4]).range([h, 0]);

    var line = d3.svg.line()
      .x(function(d,i) { 
        return x(i); 
      })
      .y(function(d) { 
        return y(d); 
      })

      var svg = d3.select("body").append("svg")
            .attr("width", w + m[1] + m[3])
            .attr("height", h + m[0] + m[2])
          .append("svg:g")
            .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

      var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
      
      svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + h + ")")
            .call(xAxis);


      var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");

      svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(-25,0)")
            .call(yAxisLeft);
      
        svg.append("path").attr("d", line(data));
      
    </script>
  </body>
</html>

＆＃13;

我要问的是如何让xAxis说出我需要的6个月，以及如何让它与线路上的各个点对齐。

提前谢谢！

Answer 1

只需在标签上添加tickformat：

  var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);

-

  var xAxis = d3.svg.axis()
                .scale(x)
                .tickSize(-h)
                .tickFormat(function(d, i){
                    return dataArrayMonths[i/2]   // for every month return the name
                })
                .tickSubdivide(true);

Here the working jsFidlle

将xAxis更改为月份而不是数字

1 个答案: