Question

我正在使用D3 js并尝试渲染多系列折线图，但我不知道为什么月份jan和8月没有显示在x轴上。请帮助我需要做什么？我想创建一个简单的7点，3系列图表，其数据如下所示：

下面是我编辑的代码示例

     var data = [
          { "date": "20140125", "a": "1", "b": "0", "L": "0" },
         { "date": "20140225", "a": "2", "b": "0", "L": "0" },
        { "date": "20140326", "a": "4", "b": "3", "L": "2" },
         { "date": "20140426", "a": "3", "b": "3", "L": "2" },
        { "date": "20140527", "a": "2", "b": "3", "L": "3" },
        { "date": "20140629", "a": "0", "b": "4", "L": "3" },
        { "date": "20140725", "a": "0", "b": "3", "L": "1"}];

         var margin = { top: 40, right: 100, bottom: 45, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;



    var parseDate = d3.time.format("%Y%m%d").parse;

    var x = d3.time.scale()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([height, 0]);

    var color = d3.scale.category10();

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.months, 1)
        .tickFormat(d3.time.format("%b"));

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var line = d3.svg.line()

    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.request); });


    var tip = d3.tip()
     .attr('class', 'd3-tip')
     .offset([-10, 0])
     .html(function (d) {
         return "<strong>Request:</strong> <span style='color:red'>" + d.request + "</span>";
     })

     var svg = d3.select("#divApprovalChainMonthly").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 + ")");


    color.domain(d3.keys(data[0]).filter(function (key) { return key !== "date"; }));
    svg.call(tip);
    data.forEach(function (d) {
        d.date = parseDate(d.date);
    });

    var cities = color.domain().map(function (name) {
        return {
            name: name,
            values: data.map(function (d) {
                return { date: d.date, request: +d[name] };
            })
        };
    });

    //x.domain(d3.extent(data, function (d) { return d.date; }));
    var myExtent = d3.extent(data, function (d) { return d.date; });
    myExtent[0] = d3.time.month(myExtent[0]);
    x.domain(myExtent);

    y.domain([
    d3.min(cities, function (c) { return d3.min(c.values, function (v) { return v.request; }); }),
    d3.max(cities, function (c) { return d3.max(c.values, function (v) { return v.request; }); })
  ]);

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

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");


    var city = svg.selectAll(".city")
      .data(cities)
    .enter().append("g")
      .attr("class", "city");

    city.append("path")
      .attr("class", "line")
      .attr("d", function (d) { return line(d.values); })
      .style("stroke", function (d) { return color(d.name); });

    city.append("g").selectAll("circle")
      .data(function (d) { return d.values })
      .enter()
      .append("circle")
      .attr("r", 3)
      .attr("cx", function (dd) { return x(dd.date) })
      .attr("cy", function (dd) { return y(dd.request) })
      .attr("fill", "none")
      .attr("stroke", "black")
      .on('mouseover', tip.show)
     .on('mouseout', tip.hide);

    city.append("text")
      .datum(function (d) { return { name: d.name, value: d.values[d.values.length - 1] }; })
      .attr("transform", function (d) { return "translate(" + x(d.value.date) + "," + y(d.value.request) + ")"; })
      .attr("x", 4)
      .attr("dy", ".35em")
      .text(function (d) { return d.name; });

Answer 1

您的图表从1月25日开始

如果您在月份使用楼层，则可以从显示月份的刻度开始

var myExtent = d3.extent(data, function (d) { return d.date; });
myExtent[0] = d3.time.month(myExtent[0]);
x.domain(myExtent);

您还可以格式化值（如本例中的2014显示而不是Jan）

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.months, 1)
        .tickFormat(d3.time.format("%b"));

d3 js中的日期格式问题

1 个答案: