D3从v3到v4和v5的初始缩放

时间:2019-11-26 16:03:48

标签: d3.js zoom scale

我正在使用d3 v3代码通过以下方式在时间轴图上实现初始缩放比例:

var xAxis = d3.axisTop(x)
        .ticks(3)
        .tickPadding(30)
        .tickSizeOuter(0)
        .tickFormat(function (d, i) {
          return i === 0 ? 'Deadline 1' : i === 1 ? 'Deadline 2' : 'Deadline ' + d3.timeFormat('%d %b')(new Date(maxDt))
        }
        )
var x = d3.scaleTime().domain([minDt, maxDt]).range([groupWidth, width]);
var zoom = d3.zoom().x(x).on('zoom', zoomed).scaleExtent(.68);

我的缩放功能如下

function zoomed() {
        if (self.onVizChangeFn && d3.event) {
            self.onVizChangeFn.call(self, {
                scale: d3.event.scale,
                translate: d3.event.translate,
                domain: x.domain()
            });
        }

        svg
          .select('.x.axis')
          .call(xAxis)

        svg
          .selectAll('circle.dot')
          .attr('cx', (d) => x(d.at))
      }
    }

但是,函数.x(x)在D3的v4或v5版本上不起作用。我可以在

中使用替代方法吗?
var zoom = d3.zoom().x(x).on('zoom', zoomed).scaleExtent(.68);

能够设置初始缩放级别?

0 个答案:

没有答案