Question

我正在尝试绘制角度为5的D3条形图。我已经使用命令

安装了d3图

npm install d3

但是当我将其与角度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中运行。

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

注意：：我从以下官方链接中提取了代码：https://scrimba.com/p/pEKMsN/cast-1953

在纯JS中效果很好

ANSWER：在全局CSS中编写样式标签，而不是在组件CSS中进行固定

Answer 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中，“此”对象填充有选定的HTML元素。

考虑一个场景，我们要在app.component.html上的鼠标单击位置绘制一个圆圈。我们将圆的“半径”保留为AppComponent类的成员变量。

解决方案：

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

<svg width=”100%” height=”1200" class=”mySvg” (click)=”clicked($event)”>内部的事件处理程序：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的鼠标位置绘制了红色圆圈。

D3条形图未在角度5中呈现

1 个答案: