在离子3.5应用程序

Question

我想显示Android移动应用程序的散点图，如下所示 - https://i.stack.imgur.com/oxHBE.png 为此，我使用的是D3.js的Scatterplot。问题是我无法在X轴上绘制月份，在Y轴上绘制工作日。  有人可以帮我解决这个问题吗？

      initSVGForScatt(){
      this.svg = d3.select("#scatterChart")
          .append("svg")
          .attr("width", '100%')
          .attr("height", '100%')
          .attr('viewBox', '0 0 900 700')
          .append("g")
          .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
      }

      initAxisForScatt(){
        this.x = d3Scale.scaleBand().range([0, this.width]).padding(5.5);
        this.y = d3Scale.scaleBand().range([this.height, 0]).padding(5.5);
        this.color = d3Scale.scaleOrdinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); //d3Scale.scaleCategory10();

        this.xAxis = d3Axis.axisBottom().scale([this.x]);
        this.yAxis = d3Axis.axisLeft().scale([this.y]);

        this.x.domain(StatsBarChart.map((d) => d.date));
        this.y.domain(StatsBarChart.map((d) => d.value));
      }


  drawAxisScatterChart() {
    this.svg.append("g")
      .attr("class", "axis axis--x")
      .call(d3Axis.axisBottom(this.x).ticks(4).tickFormat(d3extent.timeFormat("%b")))
      .attr("transform", "translate(0," + this.height + ")")
      .style("font","20px times")
      .append("text")
      .attr("class","axis-title")
      .attr("x",this.width)
      .attr("y", -6)
      .style("text-anchor","end")
      .text("Sepal Width (cm)");



    this.svg.append("g")
      .attr("class", "axis axis--y")
      .style("font","20px times")
      .call(d3Axis.axisLeft(this.y).ticks(7).tickFormat(d3extent.timeFormat("%a")))//.ticksFormat(0,":%S"))
      .append("text")
      .attr("class", "axis-title")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)");

    this.svg.selectAll(".dot")
     .data(HabitAnswerLineChart)
     .enter().append("circle")
     .attr("class","dot")
      .attr("r", (d) => d.count)
    .attr("cx", (d) => d.month)
     .attr("cy", (d) => d.day)
      .style("fill", (d) => this.color)

  }

以下是我的数据样本 对于轴绘图数据： -

    {date: new Date("2017-01-01"), value: new Date("2017-01-01")},
    {date: new Date("2017-02-02"), value: new Date("2017-01-02")}, 
    {date: new Date("2017-03-03"), value: new Date("2017-01-03")}, 
    {date: new Date("2017-04-03"), value: new Date("2017-01-04")}, 
    {date: new Date("2017-05-03"), value: new Date("2017-01-05")}, 
    {date: new Date("2017-06-03"), value: new Date("2017-01-06")}, 
    {date: new Date("2017-07-03"), value: new Date("2017-01-07")}, 
    {date: new Date("2017-08-03"), value: new Date("2017-01-07")}, 
    {date: new Date("2017-09-03"), value: new Date("2017-01-07")}, 
    {date: new Date("2017-10-03"), value: new Date("2017-01-07")}, 
    {date: new Date("2017-11-03"), value: new Date("2017-01-07")}, 
    {date: new Date("2017-12-03"), value: new Date("2017-01-07")}, 

用于坐标绘图数据集

    {month: 1, day:2, count:2},
    {month: 1, day:4, count:1},
    {month: 2, day:5, count:5},
    {month: 3, day:4, count:7}