Typescript D3V5时间线示例

我在codepen中有这个示例，但希望在D3V5中实现相同的功能。

我使用的是typescript，代码在下面的g.selectall（'svg'）处中断。 如果我有d3.select（g）.selectAll（'svg'）.data（data）.enter（）。它抛出了这个。querySelectorAll不是一个函数

有人能帮我吗

 setTimeout(function () {
        (function timelines() {
            const appendTimeAxis = function (g, xAxis, yPosition) {
                const axis = g.append('g')
                    .attr('class', 'axis')
                    .attr('transform', 'translate(' + 0 + ',' + yPosition + ')')
                    .call(xAxis);
            };

            const appendLabel = function (gParent, yAxisMapping, index, hasLabel, datum) {
                const fullItemHeight = itemHeight + itemMargin;
                const rowsDown = margin.top + (fullItemHeight / 2) + fullItemHeight * (yAxisMapping[index] || 1);
                gParent.append('text')
                    .attr('class', 'timeline-label')
                    .attr('transform', 'translate(' + labelMargin + ',' + rowsDown + ')')
                    .text(hasLabel ? labelFunction(datum.label) : datum.id)
                    .on('click', function (d, i) {// click(d, index, datum);
                    });
            };


            (function timeline(gParent) {
                const temp: any = d3.select('#timeline3');
                console.log('d3 selector');
                console.log(temp);
                //  gParent = temp._groups[0][0].firstChild;
                gParent = d3.select(temp._groups[0][0].firstChild);
                console.log('gParent');
                console.log(gParent);
                let g = temp._groups[0][0].firstChild.firstChild.firstChild;
                // const g = gParent.append('g');
                console.log('g');
                console.log(g);
                const gParentSize = temp._groups[0][0].firstChild.getBoundingClientRect();
                let gParentItem = temp._groups[0][0].firstChild;
                gParentItem = d3.select(gParentItem);
                console.log(d3.select(gParentItem));
                const yAxisMapping = {};
                let maxStack = 1,
                    minTime = 0,
                    maxTime = 0;

                setWidth();

                if (stacked || ending === 0 || beginning === 0) {
                    g = d3.select(g);
                    input = g._groups[0][0].__data__;
                    g = g._groups;
                    console.log(g);
                    g.forEach(function (d, i) {
                        console.log('d');
                        d = input;
                        console.log(d);
                        d.forEach(function (datum, index) {
                            console.log(datum);
                            console.log(index);
                            // create y mapping for stacked graph
                            if (stacked && Object.keys(yAxisMapping).indexOf(index) == -1) {
                                yAxisMapping[index] = maxStack;
                                maxStack++;
                            }
                            // figure out beginning and ending times if they are unspecified
                            datum.times.forEach(function (time, i) {
                                if (beginning === 0) {
                                    if (time.starting_time < minTime || (minTime === 0 && timeIsRelative === false)) {
                                        minTime = time.starting_time;
                                    }
                                }
                                if (ending === 0) {
                                    if (time.ending_time > maxTime) {
                                        maxTime = time.ending_time;
                                    }
                                }
                            });
                        });
                    });
                    if (ending === 0) {
                        ending = maxTime;
                    }
                    if (beginning === 0) {
                        beginning = minTime;
                    }
                }

                const scaleFactor = (1 / (ending - beginning)) * (width - margin.left - margin.right);

                // draw the axis
                const xScale = d3.scaleTime()
                    .domain([beginning, ending])
                    .range([margin.left, width - margin.right]);

                const xAxis = d3.axisBottom(xScale)
                    .tickFormat(tickFormat.format)
                    .tickSize(tickFormat.tickSize);

                if (tickFormat.tickValues != null) {
                    xAxis.tickValues(tickFormat.tickValues);
                } else {
                    xAxis.ticks(tickFormat.tickTime, tickFormat.tickInterval);
                }
                // setHeight();
                // draw the chart
                console.log(g);
                g.forEach(function (d, i) {
                    d = input;
                    console.log(d);
                    chartData = d;
                    // console.log(g._groups[0][0].__data__);
                    d.forEach(function (datum, index) {
                        const data = datum.times;
                        console.log('data');
                        console.log(data);

                        const hasLabel = (typeof (datum.label) != 'undefined');
                        g.selectAll('svg').data(data).enter()
                            .append(function (d, i) {
                                return document.createElementNS(d3.namespaces.svg, 'display' in d ? d.display : display);
                            })
                            .attr('x', getXPos)
                            .attr('y', getStackPosition)
                            .attr('width', function (d, i) {
                                return (d.ending_time - d.starting_time) * scaleFactor;
                            })
                            .attr('cy', function (d, i) {
                                return getStackPosition(d, i) + itemHeight / 2;
                            })
                            .attr('cx', getXPos)
                            .attr('r', itemHeight / 2)
                            .attr('height', itemHeight)
                            .style('fill', function (d, i) {
                                let dColorPropName;
                                if (d.color) { return d.color; }
                                if (colorPropertyName) {
                                    dColorPropName = d[colorPropertyName];
                                    if (dColorPropName) {
                                        return colorCycle(dColorPropName);
                                    } else {
                                        return colorCycle(datum[colorPropertyName]);
                                    }
                                }
                                return colorCycle(index);
                            })
                            .attr('class', function (d, i) {
                                return datum.class ? 'timelineSeries_' + datum.class : 'timelineSeries_' + index;
                            })
                            .attr('id', function (d, i) {
                                // use deprecated id field
                                if (datum.id && !d.id) {
                                    return 'timelineItem_' + datum.id;
                                }

                                return d.id ? d.id : 'timelineItem_' + index + '_' + i;
                            })
                            ;

                        g.selectAll('svg').data(data).enter()
                            .append('text')
                            .attr('x', getXTextPos)
                            .attr('y', getStackTextPosition)
                            .text(function (d) {
                                return d.label;
                            })
                            ;


                        // add the label
                        if (hasLabel) { appendLabel(gParent, yAxisMapping, index, hasLabel, datum); }

                        if (typeof (datum.icon) !== 'undefined') {
                            gParent.append('image')
                                .attr('class', 'timeline-label')
                                // tslint:disable-next-line:max-line-length
                                .attr('transform', 'translate(' + 0 + ',' + (margin.top + (itemHeight + itemMargin) * yAxisMapping[index]) + ')')
                                .attr('xlink:href', datum.icon)
                                .attr('width', margin.left)
                                .attr('height', itemHeight);
                        }

                        function getStackPosition(d, i) {
                            if (stacked) {
                                return margin.top + (itemHeight + itemMargin) * yAxisMapping[index];
                            }
                            return margin.top;
                        }
                        function getStackTextPosition(d, i) {
                            if (stacked) {
                                return margin.top + (itemHeight + itemMargin) * yAxisMapping[index] + itemHeight * 0.75;
                            }
                            return margin.top + itemHeight * 0.75;
                        }
                    });
                });
                const belowLastItem = (margin.top + (itemHeight + itemMargin) * maxStack);
                const aboveFirstItem = margin.top;
                const timeAxisYPosition = showAxisTop ? aboveFirstItem : belowLastItem;
                if (showTimeAxis) { appendTimeAxis(g, xAxis, timeAxisYPosition); }




                const gSize = g[0][0].getBoundingClientRect();
                // console.log('he');
                setHeight();



                function getXPos(d, i) {
                    return margin.left + (d.starting_time - beginning) * scaleFactor;
                }

                function getXTextPos(d, i) {
                    return margin.left + (d.starting_time - beginning) * scaleFactor + 5;
                }

                function setHeight() {
                    if (!height && !gParentItem.attr('height')) {
                        console.log('itemheight called1' + itemHeight);
                        if (itemHeight) {
                            console.log(height);
                            // set height based off of item height
                            height = gSize.height + gSize.top - gParentSize.top;
                            // set bounding rectangle height
                            // console.log('itemheight called2' + itemHeight);
                            d3.select(gParent[0][0]).attr('height', height);
                        } else {
                            throw new Error('height of the timeline is not set');
                        }
                    } else {
                        // console.log('itemheight called3' + itemHeight);
                        if (!height) {
                            // console.log('itemheight called4' + itemHeight);
                            height = gParentItem.attr('height');
                        } else {
                            // console.log('itemheight called5' + itemHeight);
                            gParentItem.attr('height', height);
                        }
                    }
                }

                function setWidth() {
                    if (!width && !gParentSize.width) {
                        try {
                            width = gParentItem.attr('width');
                            console.log('width if');
                            console.log(width);
                            if (!width) {
                                // tslint:disable-next-line:max-line-length
                                throw new Error('width of the timeline is not set. As of Firefox 27, timeline().with(x) needs to be explicitly set in order to render');
                            }
                        } catch (err) {
                            console.log(err);
                        }
                    } else if (!(width && gParentSize.width)) {
                        try {
                            console.log('width else');
                            width = gParentItem.attr('width');
                            console.log(width);
                        } catch (err) {
                            console.log(err);
                        }
                    }
                    // if both are set, do nothing
                }

            }.call(this));

setTimeout（函数（）{
（职能时间表）{
const appendTimeAxis=函数（g，xAxis，yPosition）{
常量轴=g.append（'g'）
.attr（'类'，'轴'）
.attr（'transform'，'translate（'+0+'，'+yPosition+'））
.呼叫（xAxis）；
};
const appendLabel=函数（gParent、yAxisMapping、index、hasLabel、datum）{
const fullItemHeight=itemHeight+itemMargin；
const rowsDown=margin.top+（fullItemHeight/2）+fullItemHeight*（yAxisMapping[index]| 1）；
gParent.append（'text'）
.attr（'类'，'时间线标签'）
.attr（'transform'，'translate（'+labelMargin+'，'+rowsDown+'））
.text（hasLabel？labelFunction（datum.label）：datum.id）
.on（'click'，函数（d，i）{//click（d，索引，数据）；
});
};
（功能时间线（gParent）{
常数温度：any=d3。选择（“#timeline3”）；
console.log（“d3选择器”）；
控制台日志（temp）；
//gParent=temp.\u组[0][0]。第一个孩子；
gParent=d3。选择（临时组[0][0]。第一个孩子）；
console.log（'gParent'）；
console.log（gParent）；
设g=temp._组[0][0].firstChild.firstChild.firstChild；
//常量g=gParent.append（'g'）；
console.log（'g'）；
控制台日志（g）；
const gParentSize=temp.\u组[0][0]。firstChild.getBoundingClientRect（）；
设gParentItem=temp.\u组[0][0]。第一个孩子；
gParentItem=d3.选择（gParentItem）；
console.log（d3.select（gParentItem））；
常量yAxisMapping={}；
设maxStack=1，
minTime=0，
最大时间=0；
setWidth（）；
如果（堆叠| |结束===0 | |开始===0）{
g=d3。选择（g）；
输入=g._组[0][0]。__数据\u；
g=g.\U组；
控制台日志（g）；
g、 forEach（函数（d，i）{
console.log（'d'）；
d=输入；
控制台日志（d）；
d、 forEach（功能（基准、索引）{
控制台日志（基准）；
控制台日志（索引）；
//为堆叠图形创建y映射
if（堆叠和对象.keys（yAxisMapping）.indexOf（index）=-1）{
yAxisMapping[index]=maxStack；
maxStack++；
}
//如果未指定开始和结束时间，请计算它们
基准时间forEach（函数（时间，i）{
如果（开始==0）{
if（time.start_timemaxTime）{
maxTime=time.end\u时间；
}
}
});
});
});
如果（结束===0）{
结束=最大时间；
}
如果（开始==0）{
开始=分钟时间；
}
}
常量scaleFactor=（1/（结束-开始））*（宽度-边距.left-边距.right）；
//画轴
常量xScale=d3.scaleTime（）
.domain（[开始，结束]）
.范围（[margin.left，width-margin.right]）；
常量xAxis=d3.axisBottom（xScale）
.tickFormat（tickFormat.format）
.tickSize（tickFormat.tickSize）；
if（tickFormat.tickValues！=null）{
xAxis.tickValues（tickFormat.tickValues）；
}否则{
ticks（tickFormat.tickTime，tickFormat.tickInterval）；
}
//设置高度（）；
//画图表
控制台日志（g）；
g、 forEach（函数（d，i）{
d=输入；
控制台日志（d）；
chartData=d；
//console.log（g._组[0][0]。uu数据_uuu）；
d、 forEach（功能（基准、索引）{
常数数据=基准点时间；
console.log（“数据”）；
控制台日志（数据）；
const hasLabel=（typeof（datum.label）！=“未定义”）；
g、 选择all（'svg'）。数据（data）。输入（）
.append（函数（d，i）{
return document.createElements（d3.namespaces.svg，“display”在d？d.display:display中）；
})
.attr（'x'，getXPos）
.attr（'y'，getStackPosition）
.attr（'width'，函数（d，i）{