Angular-cli:getElementsByTagName不是一个函数

Question

我正在尝试以下代码，使响应图表与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 + ")");

浏览器控制台给出

d3.getElementsByTagName is not a function

欢迎提出任何建议。

谢谢

Answer 1

变更:d3.getElementsByTagName('line-graph')to: d3.select('line-graph')

Answer 2

D3.js中没有getElementsByTagName函数。这是文档对象的原生JavaScript方法。因此，您必须使用document:

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

document.getElementsByTagName返回一个节点列表，这就是为什么在container之后需要索引(在您的示例中是[0])。

文档如下:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

PS:我从来没有听说过一个名为"line-graph"的标签。也许你想要getElementsByClassName，或者getElementById。