我无法使用d3.js显示x轴的年月 [英] I unable show the x-axis year and month using d3.js

问题描述

我已经为d3.js折线图进行了开发，但是无法连续数年和数月显示x轴.

I had developed for the d3.js line graph,but unable to show the x-axis in years and months continuously.

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轴(显示年份和月份)

My problem is x-axis (showing years and months)

推荐答案

您必须创建一个svg元素，然后附加轴.

You have to create an svg element and append the axis then.

  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轴的年月的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！