Question

我是为d3.js折线图开发的，但无法连续几年和几个月显示x轴。

Json对象如下：

var data=[{"key":[2000,0],"value":100},{{"key":[2000,4],"value":200}},{{"key":[2001,3],"value":400}},{{"key":[200,5],"value":700}}]

代码：

 var s1=globalD3Variable.map(function (d,i){return {key:d.key[0],value:d.value}})
       var x =  d3.time.scale().range([0, width]);
      var y = d3.scale.linear().range([height, 0]);

     var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(7)
     .tickFormat(d3.format("d"))

    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("cardinal")

   x.domain(d3.extent(s1, function(d) { return d.key; }));
   y.domain(d3.extent(s1, function(d) { return d.value; }));

我的问题是x轴（显示年和月）

Answer 1

你必须创建一个svg元素然后追加轴。

  var svg = 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 + ")");

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

我无法使用d3.js显示x轴年和月

1 个答案: