javascript - 如何在具有缩放功能的时间轴中的 d3 v4 中添加过滤器或 ScaleExtent

Question

我正在处理 d3 版本 4 中的时间轴。所以我创建了一个 SVG 并在该 SVG 上添加了 axis 和 zoom 作为下面。

var timeLineSVG = d3.select("body")
                .append("svg")
                .attr("width", 300)
                .attr("height", 300);
var xScale = d3.scaleTime()
            .domain([Date.parse("April 1, 2017"), Date.parse("April 30, 2017")])
            .range([0, 300]);

var xAxis = d3.axisTop(xScale);

var timeLineZoom = d3.zoom(xScale)
                    .on("zoom", onTimeLineZoom);

var timeLineGraphics = timeLineSVG.append("g")
                                .attr("transform", "translate(0,40)")
                                .call(xAxis);
timeLineSVG.call(timeLineZoom);

function onTimeLineZoom(event) {
    var tempScale = d3.event.transform.rescaleX(xScale);
    timeLineGraphics.call(xAxis.scale(tempScale));
}

比例尺的域和范围将根据数据发生变化。所以我想只允许缩放到天级别而不超过天级别。

这是 small example what I have done.

我们可以在缩放实例上使用 scaleextent 属性，但值是多少以及我们如何在不进行硬编码的情况下进行计算。

Answer 1

您可以使用 scaleExtend([minScaleFactor, maxScaleFactor]) 来控制它。 示例:d3.zoom().scaleExtend([0.5, 10])