Html 在d3 svg angular 2 typescript中圈出零大小

我正在尝试用Angular2 typescript中的d3绘制一个简单的线图，这是我的代码

import { Component, ViewChild, ElementRef, Input, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1><div class="chart" #chart></div>`,
})
export class AppComponent implements OnInit { 
 @ViewChild('chart') private chartContainer: ElementRef;
 @Input() private data: Array<any>;
 private margin: any = { top: 20, bottom: 20, left: 20, right: 20};
 private chart: any;
 private width: number;
 private height: number;
 private xScale: any;
 private yScale: any;
 private colors: any;
 private xAxis: any;
 private yAxis: any;  
 name = 'Angular';

ngOnInit() {
 this.generateData();
 this.createChart();
 if (this.data) {
     this.updateChart();
 }
}

}

如下图所示，所有的图都在那里，但由于g的高度和宽度都为零，因此它们始终为零

然而，如果我用“rect”代替“circle”代替高度和宽度，它就会出现。我确信这些元素缺少一些样式，但不确定它们是什么，请给出建议或修复

---

您必须设置圆的半径，否则它默认为零（实际上，

null

）：

---

您是否尝试将

radius

属性添加到

circle

？包含radius很有效，抱歉，这是一个愚蠢的错误！FWIW，你说过“因为g的高度和宽度都是零，所以它们总是零”。。。g元素没有高度或宽度。它们会根据内容自动调整大小。

generateData() {
  this.data = [];
  for (let i = 0; i < (8 + Math.floor(Math.random() * 10)); i++) {
      this.data.push([
          `Index ${i}`,
          Math.floor(Math.random() * 100)
      ]);
  }
}

 createChart() {

   let element = this.chartContainer.nativeElement;
   let svg = d3.select(element).append('svg');

   svg.attr('width', element.offsetWidth)
   .attr('height', element.offsetHeight);

  this.width = this.chartContainer.nativeElement.offsetWidth - 
  this.margin.left - this.margin.right;
  this.height = this.chartContainer.nativeElement.offsetHeight - 
  this.margin.top - this.margin.bottom;

  // chart plot area
  this.chart = svg;

  // define X & Y domains
  let xDomain = this.data.map(d => d[0]);
  let yDomain = [0, d3.max(this.data, (d: any) => {return d[1]})];

 // create scales
 this.xScale = d3.scaleBand().padding(0.1).domain(xDomain).rangeRound([0, this.width]);
 this.yScale = d3.scaleLinear().domain(yDomain).range([this.height, 0]);

// bar colors
 this.colors = d3.scaleLinear().domain([0, this.data.length]).range(<any[]>['red', 'blue']);

// x & y axis
 this.xAxis = svg.append('g')
    .attr('class', 'axis axis-x')
    .attr('transform', `translate(${this.margin.left}, ${this.margin.top + this.height})`)
    .call(d3.axisBottom(this.xScale));
this.yAxis = svg.append('g')
    .attr('class', 'axis axis-y')
    .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`)
    .call(d3.axisLeft(this.yScale));
}

    updateChart() {

        this.chart = this.chart.append('g')
        .attr('class', 'dots')
        .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);

        // update scales & axis
        this.xScale.domain(this.data.map(d => d[0]));
        this.yScale.domain([0, d3.max(this.data, (d:any) => {return d[1]})]);
        this.colors.domain([0, this.data.length]);
        this.xAxis.transition().call(d3.axisBottom(this.xScale));
        this.yAxis.transition().call(d3.axisLeft(this.yScale));

        let update = this.chart.selectAll('.dot')
            .data(this.data);

        update.exit().remove();

        update
            .enter()
            .append('circle')
            .attr('class', 'dot')
            .attr('cx', (d : any) => {return this.xScale(d[0])})
            .attr('cy', (d:any) =>{return this.yScale(d[1])})
            .style('fill', (d:any, i:any) => { console.log(d); return this.colors(i)});
    }

update.enter()
    .append('circle')
    .attr('class', 'dot')
    .attr("r", someValue)//set the radius here
    .attr('cx', (d : any) => {return this.xScale(d[0])})
    .attr('cy', (d:any) =>{return this.yScale(d[1])})
    .style('fill', (d:any, i:any) => { console.log(d); return this.colors(i)});