Линия D3.js через 0-е значение, параллельное оси X, не удаляется после кисти - PullRequest
0 голосов
/ 02 октября 2018

Я показываю гистограмму с накоплением, имеющую -ve и + ve оба набора значений с функцией кисти.После чистки я могу перерисовать разделительную линию по 0-му значению, параллельному оси X, но не могу удалить линию, нарисованную в самый первый раз.

Ниже код является частью основной диаграммы:

     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);

Ниже приведен фрагмент кода кисти:

    // brush tool to let us zoom and pan using the overview chart
    this.brush = d3.svg.brush();
    this.brush
        .x(subXScale)
        .extent([d3.min(this.data, (d) => { return (d['key']) }), d3.max(this.data, (d) => { return (d['key']) })])
        .on("brush", function brushed(): any {
            // update the main chart's x axis data range
            x.domain(this.brush.empty() ? subXScale.domain() : this.brush.extent());
            var dataFiltered = this.data.filter(function (d, i) {
                if ((d.key >= x.domain()[0]) && (d.key <= x.domain()[1])) {
                    return d.total;
                }
            })

            let months = monthDiff(x.domain()[0], x.domain()[1]);
            let maxValue = d3.max(dataFiltered.map(function (d) { return d.total; }));
            let minValue = d3.min(dataFiltered.map(function (d) { return d.total; }));
            y.domain([minValue > 0 ? 0 : minValue, maxValue]);


            svg.selectAll(".bar.stack")
                .attr("transform", function (d, i) { return "translate(" + x(d['key']) + ",0)"; })
            mainChart.selectAll("rect")
                .attr("width", 500 / months)
                .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))

            // draw a x-axis across 0th value 
            svg.select(".matched_peak")
                .attr("y1", (d) => { console.log(d); return y(d.total) })
                .attr("y2", (d) => { return y(d.total) })
                .attr("x2", width)


            svg.select(".x.axis").call(xAxis.tickFormat(axisTimeFormat).ticks(10));
            svg.select(".y.axis").call(yAxis)

            var s = x.domain();
            let s_orig = subXScale.domain();
            let newS = (s_orig[1].getTime() - s_orig[0].getTime()) / (s[1].getTime() - s[0].getTime());
            var t = (s[0].getTime() - s_orig[0].getTime()) / (s_orig[1].getTime() - s_orig[0].getTime());
            var trans = width * newS * t;
            zoom.scale(newS);
            zoom.translate([-trans, 0]);

        });

Добавление снимка экрана для выделения проблемы.Верхняя строка выше 0-го значения не удаляется. enter image description here

...