Я показываю гистограмму с накоплением, имеющую -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-го значения не удаляется.