Мой основной вопрос: есть ли способ установить размер окна кисти d3, чтобы он правильно наследовался от своего родителя, как и другие компоненты SVG, при использовании viewBox?
Подробности: у меня есть две диаграммы, которыесвязаны.Первый отображает набор линейных графиков, а второй - базовый график, который позволяет масштабировать основной график.Это выглядит почти так же, как в этом примере: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
Я хотел добавить svg, изменяющий размеры к диаграммам, чтобы мои диаграммы могли корректироваться автоматически.Для большинства моих графиков это прекрасно работает, но у меня проблема с окнами кисти.Когда я использую SVG viewbox вместо того, чтобы явно использовать родительские размеры, тогда моя область кисти устанавливается на маленькую область общего svg (в моем случае окно кисти имеет площадь 300px x 150px, в то время как родительский d3G в приведенном ниже коде фактически равен 1150).* 100).
Вот фрагменты кода для инициализации диаграммы и окна кисти способом, который работает правильно:
this.width = this.parentNativeElement.offsetWidth - this.margin.left - this.margin.right;
this.height = this.parentNativeElement.offsetHeight - this.margin.top - this.margin.bottom;
this.d3G = this.d3.select(this.parentNativeElement).append('svg')
//change in the next two attr lines
.attr('width', this.parentNativeElement.offsetWidth)
.attr('height', this.parentNativeElement.offsetHeight)
.append<SVGElement>('g')
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
// ... some other initialization here (scale, domain, line drawing functions etc)
this.d3G.append('g')
.attr('class', 'brush')
.call(this.d3.brushX().on('end', () => this.brushed() )
Для всех моих диаграмм единственное реальное изменение, которое янужно было изменить строки attr 'width' и 'height' и заменить их на:
.attr('viewBox', '0 0 ' + this.parentNativeElement.offsetWidth + ' ' + this.parentNativeElement.offsetHeight)
.attr('preserveAspectRatio', 'none')
.attr('width', '100%')
Я видел другие посты о проблемах инициализации Extents в Firefox: https://github.com/d3/d3-brush/issues/13,, ноЯ не устанавливаю экстенты, у меня возникают ошибки с настройками высоты и ширины по умолчанию.Это также происходит в Chrome, а не в Firefox.
У меня нет проблем с настройкой высоты и ширины по умолчанию для любых других подмножеств svg, только в окне кисти.
Я также проверилчто у меня нет статических настроек CSS, которые бы определяли статический размер окна.Google devtools также показывает, что высота и ширина являются автоматическими / автоматически для этого элемента.