Question

我有一组这样的数据。日期预先准备好作为“日期”类型对象。

$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"
 ...
 }
]

我用它来确定我的x范围和轴，具体使用如下代码：

            // 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");

当我在chrome中调试时，我得到一个确认，即minXAxis值是最小的日期时间。例如，12月初在基于月度的图表上，但轴中的第一个条目将是下一个。视觉上的轴总是移动而不适合图表。我在这里错过了什么？我认为我应该添加一个偏移量，但为什么会溢出？

谢谢！

Answer 1

尝试将x刻度范围更改为从左边距开始而不是0.

 var x = d3.scaleTime().range([margin.left, width])

虽然目前尚不清楚如何翻译绘图区域，但我认为这是你附加轴的g变量。

d3多线图溢出

1 个答案: