Question

  var data;
      data = [
                {"date":"1-May-12 11:00 AM","TPH":2},
                {"date":"1-May-12 12:00 PM","TPH":3},
                {"date":"1-May-12 1:00 PM","TPH":2},
                {"date":"1-May-12 2:00 PM","TPH":4},
                {"date":"1-May-12 3:00 PM","TPH":2},
                {"date":"1-May-12 4:00 PM","TPH":3}
             ];
        //  var passedheight = this.getHeight();
        //var containerWidth = jQuery.sap.byId(this.oParent.sId).width() || 800; // gets super parent width
        var containerWidth = $("#"+this.getId()).parent().width(); // gets immediate parent width
        var containerheight = $("#"+this.getId()).parent().height();
        var margin = {top: 15, right: 30, bottom: 20, left: 30},
        width = containerWidth- margin.left - margin.right,
         height = containerheight - margin.top - margin.bottom;
        var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
        var maxDate = parseDate(d3.max(data, function(d) { return d.date; }));
        var minDate = d3.time.hour.offset(parseDate(d3.min(data, function(d) { return d.date; })),-2);

        var x = d3.time.scale()
        .domain([minDate, maxDate])
        .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(4);

        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left").ticks(4).tickSize(-width, 0, 0);

        var line = d3.svg.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.tonneValue); });

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

          data.forEach(function(d) {
            d.date = parseDate(d.date);
          });

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

          x.domain(d3.extent(data, function(d) { return d.date; }));

          y.domain([
            //d3.min(wsfs, function(c) { return d3.min(c.values, function(v) { return v.tonneValue; }); }),
            0,
            d3.max(wsfs, function(c) { return d3.max(c.values, function(v) { return v.tonneValue; }); })
          ]);

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

          svg.append("g")
              .attr("class", "y axis")
              .call(yAxis);

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

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

          var legendNames = d3.keys(data[0]).filter(function(key) { return key !== "date" });

          data.forEach(function(d) {
            d.ages = legendNames.map(function(name) { return {name: name, value: +d[name]}; });
          });
         var legend = svg.selectAll(".legend")
              .data(legendNames.slice())
            .enter().append("g")
              .attr("class", "legend")
              .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

          legend.append("rect")
              .attr("x", width - 18)
              .attr("width", 18)
              .attr("height", 4)
              .style("fill", function(d) {return color(d); });

          legend.append("text")
              .attr("x", width - 24)
              .attr("y", 6)
              .attr("dy", ".35em")
              .style("text-anchor", "end")
              .text(function(d) {  return d; });

根据上面的代码，我得到的数据类似于下图（数据不准确）：

但是在我的代码中，我试图获得额外的范围，其中范围应该从上午10点开始到下午4点结束，即线应该从x：11 AM和y：2开始，并且应该在10之前有一些空间上午11点到上午11点，但在我的情况下，线路从2开始。滴答也是随机的。

已添加：FIDDLE

Answer 1

如果你要评论这一行（小提琴中的第63行）：

x.domain(d3.extent(data, function(d) { return d.date; }));

您的代码将按预期工作。

当您从数据中获取minDate的偏移量时，您做得正确，但稍后您已使用数据中的精确最小值和最大值覆盖了x.domain。

在d3js中调整时间刻度

1 个答案: