D3 Angular-cli：d3.getElementsByTagName 不是函数答案

【问题标题】：D3 Angular-cli: d3.getElementsByTagName is not a functionD3 Angular-cli：d3.getElementsByTagName 不是函数
【发布时间】：2016-09-01 12:18:12
【问题描述】：

我正在尝试使用 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

欢迎提出任何建议。

谢谢

【问题讨论】：

我不确定这是否是同一个问题，但她是一个堆栈答案的链接，可能有助于stackoverflow.com/questions/26848368/…

标签： javascript d3.js angular angular-cli

【解决方案1】：

更改：d3.getElementsByTagName('line-graph') 至：d3.select('line-graph')

【讨论】：

【解决方案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。

【讨论】：