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

Question

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

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])

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

How to add the filter or ScaleExtent in d3 v4 in Timeline with Zoom functionality

javascript

svg

zooming

d3.js