如何使我的d3圖形回應地適合我的網格？

我已經定制了一個用于顯示網格布局的圓環圖。網格在一行中有 3 張相同高度的不同卡片。但是當我從 d3 組件中手動更改 svg 大小時，網格中的子組件會溢位我為其指定的網格區域，這在更大的螢屏尺寸下是可以管理的。但是在筆記本電腦螢屏上，svg 的邊緣會被切斷，因為邊緣在網格視圖埠的邊界之外。

我希望圖表根據可用的網格視口數量來縮小/放大。我還在 svg 中添加了屬性 preserveAspectRatio，但這并不是很有幫助，因為組件寬度太大。

預期的網格行為：

當螢屏寬度縮小一點時：

如何使 d3 圖形回應地適應網格？

編輯：使用的代碼；

grid.component.html

<div class="grid-container">
        <!-- Grid 1 -->
        <mat-card class="card">
          <mat-card-title-group>
            <mat-card-title>
              <div class="bold-font font-size-16 ml-15">Grid 1</div>
            </mat-card-title>
          </mat-card-title-group>
          <mat-card-content class="card-grid">
            <app-d3-donut class="card-grid-graph"></app-d3-donut>
          </mat-card-content>
        </mat-card>
</div>

網格組件.scss

.card-grid {
  display: grid;
  grid-template-columns: repeat(6, 0.5fr);
  grid-template-rows: repeat(8, 1fr);
  height: calc(100% - 40px);
}

.card-grid-graph {
  grid-area: 3 / 1 / 5 / 7;
  justify-self: center;
  align-self: center;
}

我使用的組件是 app-d3-donut 來渲染卡片中的甜甜圈圖。

d3-donut.component.html

  <div #donut></div>

d3-donut.component.scss

div{
  width: 300px;
  position: relative;
  zoom: 140%;
}

d3-donut.component.ts

import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
import { D3Service } from '../services/d3.service';

@Component({
  selector: 'app-d3-donut',
  templateUrl: './d3-donut.component.html',
  styleUrls: ['./d3-donut.component.scss']
})
export class D3DonutComponent implements AfterViewInit{
  @Input('data') private data: SimpleDataModel[] = [
    { name: "Test String 1 25%", value: '25', color: '#254C66' },
    { name: `Test string 2 75%`, value: '75', color: '#49A0CC' },
  ];
  legend: any;
  private svg: any;
  private colors: any;
  @ViewChild('donut') figureElement: ElementRef;
  private d3: any;
  private margin = { top: 10, right: 0, bottom: 30, left: 0 };
  private width = 700;
  private height = 600;
  private radius = Math.min(this.width, this.height) / 2 - this.margin.left;

  graphGroup: any;
  constructor(private d3Service: D3Service) {
    this.d3 = d3Service.d3;
   }

  ngAfterViewInit(): void {
    this.createSvg();
    this.createColors(this.data);
    this.createLegend();
    this.drawChart();
  }

  private createSvg(): void {
    this.d3
      .select(this.figureElement.nativeElement)
      .append('svg')
      .attr('viewBox', `0 0 ${this.width} ${this.height}`)
      .attr("preserveAspectRatio", "xMinYMin meet");

    this.svg = this.d3
    .select(this.figureElement.nativeElement)
    .select('svg');

    this.legend = this.svg
      .append('g')
      .attr('id','legend');
    
    this.graphGroup = this.svg
      .append('g')
      .attr(
        'transform',
        'translate('   this.width / 2   ','   this.height / 2   ')'
      );
  }

  private createLegend(): void {
    //code for creating the vertical legend at the top
  }

  private createColors(data): void {
    //code for generating random colors
  }

  private drawChart(): void {
    const pie = this.d3
      .pie()
      .sort(null) // Do not sort group by size
      .value(d => {
        return d.value;
      });
    const data_ready = pie(this.data);

    // The arc generator
    const arc = this.d3
      .arc()
      .innerRadius(this.radius * 0.4)
      .outerRadius(this.radius * 0.48);

    // code for building pie chart

    // code to add the lines between chart and labels:

    // code to add the labels:
    
}

調整頁面大小后檢查的 svg：

uj5u.com熱心網友回復：

D3 圖通常呈現為 SVG。您可以添加一些 CSS 以使它們具有回應性：

svg {
  height: auto;
  max-width: 100%;
  vertical-align: center;
}

與其他影像幾乎相同

uj5u.com熱心網友回復：

你有兩個選擇：

1. 在 resize 事件中，將網格單元的width和傳遞height給組件（現在它們分別是常量，700 和 600）并洗掉viewBox：

d3.select(...).append('svg').attr('width', this.width).attr('height', this.height);

2. 將 SVG 的 vidth 和高度設定為 100%，設為viewBox常數（例如0 0 100 100）并設定圓環半徑常數（相對于視圖框）：

d3.select(...).append('svg').attr('viewBox', '0 0 100 100')

CSS：

svg {
  width: 100%;
  height: 100%;
}

標籤：

上一篇：將svg圖示顏色更改為不同的顏色

下一篇：如何讓SVG中的多邊形和路徑在href中一起作業