D3条形图未以角度5呈现答案

【问题标题】：D3 Bar chart is not rendering in angular 5D3条形图未以角度5呈现
【发布时间】：2018-07-28 08:33:36
【问题描述】：

我正在尝试以 5 角呈现 D3 条形图。我已经使用命令安装了 d3 图

npm install d3

但是当我将它与 angular 5 一起使用时，图表不会被渲染。我的 HTML 代码是：

         <button (click)= 'getGraph()'>show</button>
          <div class="chart">
          </div>

我的 ts 文件：

    import { Component, OnInit } from '@angular/core';
     import * as d3 from 'd3';
     @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css']
       })
       export class DashboardComponent{
            data= [10,20,30,40,50,60]
           constructor() 
           {

            }
           ngOnInit() {
           } 

           getGraph() {
                d3.select(".chart")
                .selectAll("div")
                .data(this.data)
                .enter()
                .append("div")
                .style("width", function(d) { return d + "px"; })
                .text(function(d) { return d; });
           }
       }

我的 CSS 文件：

.chart div {
font: 10px sans-serif;
background-color: red;
text-align: right;
padding: 3px;
margin: 1px;
color: white;

}

这些值显示在不同的位置，但没有形成图表。执行有什么问题吗。相同的代码在纯 JS 中工作。

这里是stackblitz： https://stackblitz.com/edit/angular-rxgsv6?embed=1&file=src/app/app.component.html

注意：我从这个官方链接获取代码：https://scrimba.com/p/pEKMsN/cast-1953

在纯 JS 中运行良好

回答：在全局 CSS 中而不是组件 CSS 中编写样式标签来修复它

【问题讨论】：

我与上面代码中的图表没有任何关系。它只是为数据集中的每个元素呈现 div - 这似乎在您提供的链接中有效。我是不是误会了什么？
它应该创建 d3 条形图。它没有创造
代码在哪里？你能分享一下吗？你说的图表是什么？到目前为止，您共享的代码呈现 div
请查看上面的 stackblitz 链接
您不能在组件的样式表中设置 div 的样式。全局样式表中的样式。由于您在没有 Angular 的情况下创建 div，因此缺少视图封装所需的属性，因此样式不适用。

标签： javascript angular d3.js

【解决方案1】：

将 D3js 与 Angular 集成并开始使用 D3js 的强大功能构建 SPA 非常容易。

步骤：

使用 angular/cli 创建新的 Angular 项目

ng new d3-ng5-demo

创建新项目并安装依赖项后，安装 D3js

 npm install d3

导入 D3 并开始在您的组件中使用它。例如，在 app.component.ts 文件中导入“d3”如下：

import * as d3 from “d3”;

使用 d3js 选择您的 HTML 元素进行数据连接操作/DOM 操作。 ngAfterContentInit() 生命周期钩子是使用 D3 选择元素的最佳位置，因为此时 DOM 已准备好用于当前组件。

ngAfterContentInit() {
d3.select(“p”).style(“color”, “red”);
}

如果你在 app.component.html 文件中有<p> 标签，一旦浏览器加载完 app.component，<p> 标签应该是红色的。

解析“this”范围

在 Angular 中，.ts 文件中的“this”对象用于引用成员变量和成员函数。而在 D3js 中，“this”对象填充了选定的 HTML 元素。

考虑一个场景，我们想在 app.component.html 上的鼠标点击位置画圆。我们将圆的“半径”作为 AppComponent 类的成员变量。

解决方案：

将$event 参数传递给标签上的点击事件处理程序

<svg width=”100%” height=”1200" class=”mySvg” (click)=”clicked($event)”>Click 事件处理函数 inside.ts:

clicked(event: any){
d3.select(event.target).
append('circle').
attr('cx' , event.x).
attr('cy' , event.y).
attr('r' , this.radius).
attr('fill' , 'red')
 }

就是这样！在浏览器中，如果您单击<svg> 标签中的任意位置；你会看到红色圆圈被绘制在半径为 10 的鼠标位置。

【讨论】：