Кисть d3.js () наследует неправильную высоту и ширину от родительского svg, используя viewBox - PullRequest
Новая
       44

Кисть d3.js () наследует неправильную высоту и ширину от родительского svg, используя viewBox

0 голосов
/ 15 мая 2018

Мой основной вопрос: есть ли способ установить размер окна кисти 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 также показывает, что высота и ширина являются автоматическими / автоматически для этого элемента.

1 Ответ

0 голосов
/ 23 мая 2018

Это оказалось довольно тривиальным исправлением. Очевидно, кисть не принимает настройки по умолчанию (из родительского) для инициализации как высоты, так и ширины. Если я установлю один, а затем использую 100% другого, этого достаточно для правильной инициализации кисти. В конечном итоге вот что я использовал для настройки изменения размера: 

.attr('width', '100%')
.attr('height', this.parentNativeElement.offsetHeight)
.attr('viewBox', '0 0 ' + this.parentNativeElement.offsetWidth + ' ' + this.parentNativeElement.offsetHeight)
.attr('preserveAspectRatio', 'none')

Это приводит к тому, что svg поддерживает статическую высоту и масштабируется только в горизонтальном направлении, но не имеет проблем с кистью.

...