角（6）和d3（v5）：一个svg中作为子元素的组件，并将svg元素传递给每个组件

Question

I am using Angular 6 and d3 v5 . I have created a Glyph component with html template

<svg:g #glyph></svg:g>

and in order to add svg elements using d3 , in the .ts file I have selector: '[glyph]' and

@ViewChild('glyph') private glyphContainer : ElementRef;
...
const glyphElement = this.glyphContainer.nativeElement;
d3.select(glyphElement).append("svg:rect")
...

In the parent component I can use <svg glyph></svg> to show this.

---

I want to add multiple instances of this Glyph component into the same svg, for instance, in a GlyphList component. In order to manage d3 selections, transitions, and interaction, I want each individual component to be part of the same svg (or better yet, part of the same svg:g element).

As an example, imagine that I am creating a visualization on a file system and Glyph is a custom svg:g UI element visualizing a particular file or folder, and I have a directory of files that I want visualized with a GlyphList component, all in the same svg .

How can I do this in Angular? Namely, how do I structure the template and initiate each Glyph component and pass in a shared svg element in a GlyphList component (or service?) that I can select with d3 in each of the child components?

Answer 1

Check this tutorial, in the section SVG Components with Angular, there is a section of how to do exactly what you are asking for.

https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb

<svg>
    <g [lineExample]></g>
</svg>

And your svg component: import { Component } from '@angular/core';

@Component({
    selector: '[lineExample]',
    template: `<svg:line x1="0" y1="0" x2="100" y2="100"></svg:line>`
})
export class LineExampleComponent {
    constructor() {}
}

However, I end up here because I can't make it work, Angular gives me this error

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'lineExample' since it isn't a known property of ':svg:g'. ("<svg>
    <g [ERROR ->][lineExample]></g>
</svg>"): ng:///AppModule/TrackComponent.html@1:7

Let me know if you make it work!