无法在我的 Angular 应用程序中同时显示两个 d3 图表

Question

我刚刚将第二个 d3 图表作为自己的组件（就像我的第一个组件一样）添加到我的 Angular 项目中。当我尝试在其中一个页面上显示这两个页面时，只有第二个页面（需要一些时间来渲染）会保留在页面上。第一个在大约半秒内几乎看不见。

对于这两个图表，我创建了自己的组件，其中图表（svgs）被附加到具有唯一 id 的自己的 div 中。我使用 ViewChild 访问 div

我已经尝试为这两个 svg 提供唯一的 svg id 和变量名称，如下所示：

const svgDoughnut = d3
.select(containerEl)
.append("svg")
.attr("width", containerEl.offsetWidth)
.attr("height", containerEl.offsetHeight)
.attr("id", "svgDoughnutChart")
.attr(
    "viewBox",
    -containerEl.offsetWidth / 2 +
        " " +
        -containerEl.offsetHeight / 2 +
        " " +
        containerEl.offsetWidth +
        " " +
        containerEl.offsetHeight
);

或这里：

const element = this.lineChartContainer.nativeElement;
    const svgLine = d3
        .select(element)
        .append("svg")
        .attr("id", "svgLineChart")
        .attr("width", element.offsetWidth)
        .attr("height", element.offsetHeight);

但这没有任何区别。

Answer 1

对于简单的圆环图。我创建了一个原生 Web 组件

<pie-chart>

可以在任何框架中使用

参见https://pie-meister.github.io/

用途：

• 定义（或加载）

  <pie-chart>

  Web 组件
• 编写 HTML

  customElements.define("pie-chart",class extends HTMLElement{connectedCallback(){setTimeout((()=>this.svg(this.attachShadow({mode:"open"}))))}svg(t,e=(this.getAttribute("stroke")||"#3c3,#c33,#33c,#cc3,#c3c,#3cc").split(","),i=~~this.getAttribute("pull"),s=0,r=0){t.innerHTML=`<style>:host{display:inline-block}svg{width:100%}</style><svg part=svg viewBox=0,0,${1e3+i},${1e3+i}>${this.innerHTML}</svg>`;[...t.querySelectorAll("slice")].map(((t,u)=>{let l,o=document.createElementNS("http://www.w3.org/2000/svg","g"),a=document.createElementNS("http://www.w3.org/2000/svg","text"),n=t.getAttribute("size")||"",h=~~n.replace("%",""),g=~~t.getAttribute("stroke-width")||~~this.getAttribute("stroke-width")||500+i/2-i,p=s;o.path=(s=0,u=g,a=t.getAttribute("stroke")||(l?"":e.shift()),n=h,b=p,A=(500+i/2)/2-i/2+s-("stroke-width"==this.getAttribute("fill")?(500-i/2-u)/2:0),c=document.createElementNS("http://www.w3.org/2000/svg","path"))=>(c.setAttribute("part","path"),c.setAttribute("stroke",a),c.setAttribute("stroke-width",u),c.setAttribute("pathLength",r),c.setAttribute("stroke-dasharray",n+" "+(r-n)),c.setAttribute("d",`m${500+i/2},${500+i/2}m0,${-A}a2,2,0,000,${2*A}a2,2,0,000-${2*A}`),c.setAttribute("fill","none"),c.getPoint=(t=0,e)=>e?o.path(e).getPoint(t):c.getPointAtLength(c.getTotalLength()-c.getTotalLength()/r*(t+(b+n/2))),c);h==n?r||[...this.querySelectorAll("slice")].map((t=>r+=~~t.getAttribute("size"))):r=~~this.getAttribute("size")||100;h||(h=r-s,n=h+"%");l=o.path(~~t.getAttribute("radius"));o.points=[[0,0],[h/-2,g/-2],[h/-2,g/2],[h/2,g/-2],[h/2,g/2],[0,g/-2],[0,g/2],[0,~~t.getAttribute("pulltext")||~~this.getAttribute("pulltext")||0],[0,Math.abs(~~t.getAttribute("pull")||i)]].map((([t,e])=>l.getPoint(t,e)));o.setAttribute("part","slice"+u);o.setAttribute("size",n);o.setAttribute("label",a.innerHTML=this.querySelector("style")?t.innerHTML?t.innerHTML.replace("$size",n):n:"");l.setAttribute("stroke-dashoffset","top"==this.getAttribute("offset")?h-r:s+=h);[...t.attributes].map((t=>l.setAttribute(t.name,t.value)));a.setAttribute("part","text");a.setAttribute("x",t.getAttribute("x")||("top"==this.getAttribute("offset")?"50%":o.points[7].x));a.setAttribute("y",t.getAttribute("y")||("top"==this.getAttribute("offset")?"50%":o.points[7].y));o.append(l,a);t.replaceWith(o);t.hasAttribute("pull")&&o.setAttribute("transform",`translate(${o.points[8].x-o.points[0].x} ${o.points[8].y-o.points[0].y})`)}))}});

  <pie-chart stroke-width="200" pull="-50">
    <style>
      text {
        font-size: 4em;
        text-anchor: middle;
      }
    </style>
    <slice size="10"></slice>
    <slice size="20" pull></slice>
    <slice size="40"></slice>
    <slice size="40"></slice>
  </pie-chart>