d3v4时间线图-从版本3升级到版本4

Question

我有一个时间表应用程序-正在使用旧的d3。我曾尝试升级它并重构代码库-但是我在缩放比例方面遇到了麻烦。作为甘特图，这很好。

//版本3 https://jsfiddle.net/5xsu76ck/1/

//版本4 https://jsfiddle.net/8cy719w0/2/

            //scales
            var x =  d3.scaletime()
                    .domain([timeBegin, timeEnd])
                    .range([0, width]);
            var x1 = d3.scaleLinear()
                    .range([0, width]);
            var y1 = d3.scaleLinear()
                    .domain([0, laneLength])
                    .range([0, mainHeight]);
            var y2 = d3.scaleLinear()
                    .domain([0, laneLength])
                    .range([0, miniHeight]);

            var scaleFactor = (1/(timeEnd - timeBegin)) * (width);

---

当前问题 https://jsfiddle.net/8cy719w0/2/-我设法解决了一些问题-但现在笔刷出现了问题

            //brush
    var brush = d3.brushX()
       .extent([
         [0, 0],
         [width, miniHeight]
       ])
       .on("brush", display);

Answer 1

d3版本4使用d3.scaleTime，因此您的x变量应为

var x =  d3.scaleTime()
.domain([timeBegin, timeEnd])
.range([0, width]);

https://github.com/d3/d3-scale#time-scales