D3 Angular-cli: d3.getElementsByTagName ist keine Funktion

Question

Ich versuche folgenden Code zu reagieren Diagramm mit D3-4.2.2.

import * as D3 from 'd3'; 

let d3:any = D3; 

var container = d3.getElementsByTagName('line-graph'), 
    width = container[0].offsetWidth, 
    height = container[0].offsetHeight; 

var svg = d3.select(this.htmlElement).append("svg") 
    .attr("class", "line-graph") 
    .attr("width", "100%") 
    .attr("height", "100%") 
    .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height)) 
    .attr('preserveAspectRatio', 'xMinYMin') 
    .append("g") 
    .attr("transform", "translate(" + Math.min(width, height)/2 + "," + Math.min(width, height)/2 + ")"); 

Browser-Konsole gibt

d3.getElementsByTagName is not a function 

Jeder Vorschlag geschätzt werden.

Danke

Answer 1

Wechsel: d3.getElementsByTagName('line-graph') zu: d3.select('line-graph')

Answer 2

Es gibt keine Funktion getElementsByTagName in D3.js. Dies ist eine native JavaScript-Methode des Dokumentobjekts. So haben Sie document verwenden:

var container = document.getElementsByTagName('line-graph'), 
    width = container[0].offsetWidth, 
    height = container[0].offsetHeight; 

document.getElementsByTagName gibt eine Knotenliste, und das ist, warum Sie den Index müssen (in Ihrem Fall [0]) nach container. Hier

ist die Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

PS: Ich habe nie über einen Tag mit dem Namen "line-Diagramm" zu hören. Vielleicht möchten Sie getElementsByClassName oder getElementById.