Добавьте масштабирующий слой на гистограмму для всего svg вместе с рабочим всплывающим подсказком на столбцах в d3.js - PullRequest
Новая
       19

Добавьте масштабирующий слой на гистограмму для всего svg вместе с рабочим всплывающим подсказком на столбцах в d3.js

0 голосов
/ 03 октября 2018

Я работаю над столбчатой ​​диаграммой 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);
            })
...