d3 multi line chart is overflowing

Question

I have a set of data such as so. The date is preparsed before hand to be a "date" type object.

$scope.graphedPlans = [
{key: "planProvider1"
   values: [
      {
      Date: Wed Nov 19 2014 00:00:00 GMT-0600 (Central Standard Time),
      Cost: 141.56
      },
      {
        Date: Mon Dec 22 2014 00:00:00 GMT-0600 (Central Standard Time,
        Cost: 50.60
      }
    ]
 },
 {  key: "planProvider2"
 ...
 }
]

I use it to determine my x range and axis, specifically using the code as below:

            // Chart Values
            var xAxis, yAxis;
            var minXaxis = 0, minYAxis = 0, maxXAxis = 0, maxYAxis = 0;
            var x = d3.scaleTime().range([0, width]),
                y = d3.scaleLinear().range([height, 0]),
                z = d3.scaleOrdinal(blueScale);
            var svg = d3.select("#planLineChart"),
                margin = { top: 20, right: 50, bottom: 20, left: 50 },
                width = svg.attr("width") - margin.left - margin.right,
                height = svg.attr("height") - margin.top - margin.bottom,

        minXaxis = d3.min($scope.graphedPlans, function (c) { return d3.min(c.values, function (d) { return d.Date; }) });
                minYAxis = d3.min($scope.graphedPlans, function (c) { return d3.min(c.values, function (d) { return d.Cost; }) });
                maxXAxis = d3.max($scope.graphedPlans, function (c) { return d3.max(c.values, function (d) { return d.Date; }); });
                maxYAxis = d3.max($scope.graphedPlans, function (c) { return d3.max(c.values, function (d) { return d.Cost; }); });

                // Scale and Range setup
                x.domain([minXaxis, maxXAxis]);
                y.domain([minYAxis, maxYAxis]);
                z.domain($scope.graphedPlans.map(function (c) { return c.key; }));

                xAxis = d3.axisBottom(x);
                yAxis = d3.axisLeft(y);
          // Attach Axis x & y to graph
                g.append("g")
                    .attr("class", "axis axis--x")
                    .attr("transform", "translate(0," + height + ")")
                    .attr('stroke', 'black')
                    .call(xAxis);

                g.append("g")
                    .attr("class", "axis axis--y")
                    .call(yAxis)
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 0)
                    .attr('stroke', 'black')
                    .attr("dy", "0.71em")
                    .attr("fill", "#000")
                    .style("text-anchor", "end");

When I debug in chrome, I get a confirmation that the minXAxis values is the smallest date time. For example, early december on a monthly based chart, but the first entry within the axis will be the next one. The axis on the visual is always shifted and not fitting on the chart. What am I missing here? I considered that I should add an offset, but why would it overflow?

Thanks!

d3 multi line chart is overflowing

Answers (1)

Related Questions