Question

我正在使用Thomas Wanzek的服务d3-ng2-service使用d3格式的数据来渲染条形图，

data = [
          {xVal : 1, yVal : 1},
          {xVal : 2, yVal : 4},
          {xVal : 3, yVal : 2},
          {xVal : 4, yVal : 3}
      ];

这是我的d3graph.component.ts文件

import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';

import {
  D3Service,
  D3,
  Axis,
  BrushBehavior,
  BrushSelection,
  D3BrushEvent,
  ScaleLinear,
  ScaleOrdinal,
  Selection,
  Transition
} from 'd3-ng2-service';


@Component({
  selector: 'app-d3graph',
  template: '<svg width="200" height="200"></svg>'
})
export class D3graphComponent implements OnInit {
  private d3: D3;
  private parentNativeElement: any;
  private d3Svg: Selection<SVGSVGElement, any, null, undefined>;

  constructor(element: ElementRef, private ngZone: NgZone, d3Service: D3Service) {
    this.d3 = d3Service.getD3();
    this.parentNativeElement = element.nativeElement;
  }

  ngOnInit() {
            let self = this;
            let d3 = this.d3;
            let d3ParentElement: any;
            let svg: any;
            let xVal: number;
            let yVal: number;
            let data: { xVal: number, yVal: number}[] = [];
            let padding: number = 25;
            let w: number = 500;
            let h: number = 150;
            let xScale: any;
            let yScale: any;
            let xAxis: any;
            let yAxis: any;

    if (this.parentNativeElement !== null) {
      svg = d3.select(this.parentNativeElement)
          .append('svg')        // create an <svg> element
          .attr('width', w) // set its dimensions
          .attr('height', h);

      data = [
          {xVal : 1, yVal : 1},
          {xVal : 2, yVal : 4},
          {xVal : 3, yVal : 2},
          {xVal : 4, yVal : 3}
      ];

      xScale = d3.scaleLinear()
          .domain([0,d3.max(data, function(d) {return d.xVal})])
          .range([0, 200]);

      yScale = d3.scaleLinear()
          .domain([0,d3.max(data, function(d) {return d.yVal})])
          .range([100, 0]);

      xAxis =  d3.svg.axis(xScale) // d3 v.4
          .ticks(5)
          .scale(xScale)
          .orient("bottom");

      yAxis = d3.svg.axis(yScale)
          .scale(yScale)
          .orient("left")
          .ticks(7);

        svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + (padding) + "," + padding + ")")
        .call(yAxis);

           svg.append('g')            // create a <g> element
         .attr('class', 'axis')   // specify classes
           .attr("transform", "translate(" + padding + "," + (h - padding) + ")")
         .call(xAxis);            // let the axis do its thing

      var rects = svg.selectAll('rect')
          .data(data);
          rects.size();

      var newRects = rects.enter();

      newRects.append('rect')
          .attr('x', function(d, i) {
              return xScale(d.xVal);
          })
          .attr('y', function(d, i) {
              return yScale(d.yVal);
      })
            .attr("transform","translate(" + (padding -5) + "," + (padding - 5) + ")")
          .attr('height', 10)
          .attr('width', 10);


    }

   }
 }

我在编辑器（Atom）中为xAxis = ....和yAxis = ...获得了'svg'的红色下划线。这也是“编译失败”错误指向的地方。

但我知道这个服务应该与d3 v.4一起使用，就像在package.json文件中那样，

  "description": "An Angular app which demonstrates the implementation of D3 version 4 components.",

当我注释掉代码的xAxis和yAxis部分时，矩形显示正常。那么轴有什么问题？

使用Angular4和d3.js版本4的简单条形图

0 个答案: