Может кто-нибудь сказать мне, почему моя гистограмма d3 не появляется? - PullRequest
Новая
       8

Может кто-нибудь сказать мне, почему моя гистограмма d3 не появляется?

0 голосов
/ 03 ноября 2018

Следующий код должен отображать график, но по какой-то причине это не так. Я не уверен, почему, кто-нибудь? Я установил d3 и в моем package.json есть "@ types / d3": "^ 5.0.1", а также "d3": "^ 5.7.0". 

//in component.html
<mat-card>
<h2>Amount Total By Service</h2>
<mat-card-content>
    D3.js graph here
    <svg width='500' height='200'></svg>
</mat-card-content>  
</mat-card>  



//in component.ts
import  * as d3 from 'd3';


constructor(private http: HttpClient, private router: Router) {
 //this.http.get('/api/home', {}).subscribe(res => { 
 this.invoices = res;   console.log(res), (err) => {console.log(err)}})
 this.invoices = this.http.get('/api/home/' + localStorage.getItem('username'),  {});
 this.buildChart();
 }

buildChart(){
var data = [80, 120, 60, 150,200];
var svgWidth = 500, svgHeight = 200, barPadding = 5;
var barWidth = (svgWidth / data.length);

var svg = d3.select('svg')
      .attr('width', svgWidth)
      .attr('height', svgHeight);
svg.selectAll("rect")
      .data(data)
      .enter()
      .append('rect')
      .attr("y", function(d){
        return svgHeight - d
      })
      .attr("height", function(d) {
        return d
      })
      .attr("width", barWidth - barPadding)
      .attr("fill", "red")
      .attr("transform", function(d, i){
        var translate = [barWidth * i, 0];
        return "translate(" + translate + ")";
      })
}

Я только что узнал, что флаг не имеет к этому никакого отношения. Для рендеринга графика необходимо дважды нажать кнопку. Ошибка при запуске buildchart //console.log first click start of buildchart home.component.ts:71 Selection { _groups: Array(1), _parents: Array(1) } _groups: Array(1) 0: [null] length: 1 __proto__: Array(0) _parents: [html] __proto__: Object //console.log second click home.component.ts:47 start of buildchart home.component.ts:71 Selection { _groups: Array(1), _parents: Array(1) } _groups: Array(1) 0: [svg] length: 1 __proto__: Array(0) _parents: [html] __proto__: Object

1 Ответ

0 голосов
/ 04 ноября 2018

Тестирование только вашего кода d3 похоже работает. Смотрите фрагмент ниже. Похоже, вы используете код внутри Angular-компонента, помните о его жизненном цикле. Посмотрите на этот пример на codepen https://codepen.io/anon/pen/epLNVZ 

function buildChart() {
var data = [80, 120, 60, 150,200];
var svgWidth = 500, svgHeight = 200, barPadding = 5;
var barWidth = (svgWidth / data.length);

var svg = d3.select('svg')
      .attr('width', svgWidth)
      .attr('height', svgHeight);
svg.selectAll("rect")
      .data(data)
      .enter()
      .append('rect')
      .attr("y", function(d){
        return svgHeight - d
      })
      .attr("height", function(d) {
        return d
      })
      .attr("width", barWidth - barPadding)
      .attr("fill", "red")
      .attr("transform", function(d, i){
        var translate = [barWidth * i, 0];
        return "translate(" + translate + ")";
      })
}
buildChart();
<svg width='500' height='200'></svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
...