Question

我想在我的最小/最大数据点与轴之间创建一个缓冲区，以便在初始加载时，并且在缩放之前，您可以看到整个最小/最大点，而不会被切断。我的代码笔位于：https://codepen.io/lahesty/pen/XYoyxV（第119-141行）

我认为这与缩放有关吗？这是我目前所拥有的。也许我可以调整范围或域，以便在用户缩放之前给它更多的空间。这是我所拥有的：

// scale, set ranges

var x = d3.scaleLinear()
.range([0, width-100])
.domain(d3.extent(data[0], function(d) { return d.inspected_at; }));

var y = d3.scaleLinear()
.range( [height, 0])
.domain(d3.extent(data[0], function(d) { return d.flow_data; }));

//create x and y axis

var xAxis = d3.axisBottom()
.scale(x)
.ticks((width+2)/(height+2))
.tickSize(-height)
.tickPadding(10)    
.tickFormat(d3.timeFormat("%b %d, %H:%M:%S"))

var yAxis = d3.axisLeft()
.scale(y)
.ticks(5)
.tickSize(-(width-100))
.tickPadding(10)

非常感谢！让我知道是否能提供更多信息

编辑：编辑这与可能的重复答案不同，因为缩放时间是d3的不同函数，而不仅仅是正常的数字/数字。请参阅下面的答案（interval.offset）

Answer 1

由于具有时间刻度，因此不能像给定注释中正确链接的答案那样简单地将域值乘以给定的数字（这是线性刻度最常见的解决方案）。

在时间范围内，您可以使用interval.offset来增加或减少时间。

例如，在您的情况下，我将从第一个日期减去10秒，然后在最后一个日期加上10秒：

var x = d3.scaleTime()
    .domain([d3.timeSecond.offset(d3.min(data[0], function(d) {
            return d.inspected_at;
        }), -10),
        d3.timeSecond.offset(d3.max(data[0], function(d) {
            return d.inspected_at;
        }), +10)
    ])
    .range([0, width - 100]);

这应该足够了，但是您可以按照自己的方式更改该魔术数字。

此外，值得一提的是，interval.offset比JS替代品更容易和更方便，因为您可以d3.timeSecond使用几秒钟，d3.timeMinute使用几分钟，d3.timeDay使用天等，然后添加或减去所需的秒，分钟，天，周等数量。

这是更新的CodePen：https://codepen.io/anon/pen/NBEyrN?editors=0010

使用时间刻度为第一个和最后一个数据点创建填充

1 个答案: