在条形图上为整个svg添加缩放层，并在d3.js的条形图上添加工作工具提示

Question

我正在处理d3.js堆积条形图，该图具有鼠标滚动的缩放功能。此缩放功能仅在鼠标指针位于条上且其位于条外部时才无法进行缩放（鼠标正在滚动页面）时才起作用。 我也在栏上显示工具提示。当我尝试在条形图上添加一个额外的缩放层时，工具提示不起作用。

下面的代码是主图表的一部分：

         let seq = svg.append("g")
        // .attr("class", "seq")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("clip-path", "url(#clip)")
        .style("clip-path", "url(#clip)")

    seq.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("x", -80)
        .attr("width", width)
        .attr("height", height);

    let mainChart = seq.append("g")
        .attr("class", "mainchart")
        .attr("transform", "translate(" + -80 + "," + -10 + ")")

    //draw a x-axis with domain below 
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height) + ")")
        .call(xAxis.tickFormat(axisTimeFormat))
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis.ticks(7).tickFormat(d3.format("s")));

    seq = mainChart.selectAll(".bar.stack")
        .data(this.data)
        .enter().append("g")
        .attr("class", "bar stack")
        .attr("transform", function (d, i) { return "translate(" + x(d.key) + ",0 )"; }.bind(this));
    seq.selectAll("rect")
        .data(function (d) { return d.row; })
        .enter().append("rect")
        .attr("class", function (d) {
            return chartId + " " + d.name
        }.bind(this))
        .attr("width", 15)
        .attr("y", function (d) { return y(d.y0) - y(d.y1) > 0 ? y(d.y1) : y(d.y0); }.bind(this))
        .attr("height", function (d) {
            return Math.abs(y(d.y0) - y(d.y1));
        }.bind(this))
        .style("fill", function (d) { return color(d.name); }.bind(this))

       //draw a x-axis across 0th value 
       mainChart.selectAll('line.matched_peak')
       .data(this.data)
       .enter()
       .append("line")
    .attr("class", "matched_peak")
        .attr("y1", y(-5))
        .attr("y2", y(-5))
        .attr("x2", width) 
        .attr("stroke", "black");

        mainChart.call(zoom);

下面是缩放功能代码：

  var zoom = d3.behavior.zoom().y(subYScale).scaleExtent([1, 10])
        .on("zoom",
            function () {
                d3.event['sourceEvent'].preventDefault();
                var t = d3.event['translate'];
                var s = d3.event['scale'];

                svg.select(".x.axis").call(xAxis.tickFormat(axisTimeFormat).ticks(10));
                mainChart.attr("transform", "translate(" + t[0] + ",-10)scale(" + s + ",1)");

                seq.selectAll("rect")
                    .data(function (d) { return d.row; })
                    .enter().append("rect")
                    .attr("class", function (d) {
                        return chartId + " " + d.name
                    }.bind(this))
                    .attr("width", 20)
                    .attr("y", function (d) { return y(d.y0) - y(d.y1) > 0 ? y(d.y1) : y(d.y0); }.bind(this))
                    .attr("height", function (d) {
                        return Math.abs(y(d.y0) - y(d.y1));
                        //Math.abs(y(d.y0) - y(d.y1)) < 10 && Math.abs(y(d.y0) - y(d.y1)) !=0 ? 20 : Math.abs(y(d.y0) - y(d.y1));
                    }.bind(this))
                    .style("fill", function (d) { return color(d.name); }.bind(this))

                zoom.scale(s);
  }

下面是工具提示代码段：

chart.selectAll('g .stack rect,g .legend,.text-tooltip').call(tip)
            .on('mouseover', function (d) {
                if (typeof d === 'object') {
                    d3.select(this).style("opacity", 0.3)
                } else {
                    svg.selectAll("." + chartId).style("opacity", 0.3);
                    svg.selectAll("." + d).style("opacity", 1);
                }
                tip.show(d);
            })