我无法使用 d3.js 在每月数据中显示我的 x 轴

I can't show my x-axis in monthly data using d3.js

本文关键字:数据 显示 我的 js d3      更新时间:2023-09-26

我开发了我的折线图,但无法显示一年中的每月(3个月)数据,我已经显示了一年,但是我无法显示哪一年的月份交易没有显示,给定的json对象

var data=[{"key":[2000,0],"value":100},{"key":[2000,1],"value":200},
          {"key":[2001,3],"value":400},{"key":[2001,4],"value":500},
          {"key":[2002,1],"value":600},{"key":[2002,1],"value":700},
          {"key":[2003,2],"value":500},{"key":[2003,1],"value":800},
          {"key":[2004,5],"value":200},{"key":[2004,1],"value":900},
          ]
      var s1=data.map(function (d,i){return {key:d.key[1],value:d.value}}) 
      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(20)
        .tickFormat(d3.time.months,4)
       var yAxis = d3.svg.axis().scale(y).orient("left")
       var line = d3.svg.line()
       .x(function(d) { return x(d.key); })
       .y(function(d) { return y(d.value); })
       .interpolate("linear")
      var svg = d3.select("body").select("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
       x.domain(d3.extent(s1, function(d) { return d.key; }));
       y.domain(d3.extent(s1, function(d) { return d.value; }));
       svg.append("path").attr("class", "line").attr("d", line(s1)); 
如果我

理解正确的话,这是构建月份轴的示例 - 月轴