Question

为了在x轴上具有整数值（上面链接中显示的图），我面临问题。 x轴应划分为1,2,3，但被划分为0.0，0.2，0.4，0.6，...，2.8，3.0。我有以下代码：

private initSvg() {
    d3.select("#svg1")
      .attr("width", document.getElementById("svg1").parentElement.offsetWidth - 300 - this.margin.left - this.margin.right)
      .attr("height", (document.getElementById("svg1").parentElement.offsetWidth / 3))
    this.svg = d3.select('#svg1');
    this.width = document.getElementById("svg1").parentElement.offsetWidth - 300 - this.margin.left - this.margin.right;
    // this.height = +this.svg.attr("height") - this.margin.top - this.margin.bottom;
    this.height = (document.getElementById("svg1").parentElement.offsetHeight - 100)
    // console.log(this.width, this.height)
    this.g = this.svg.append("g")
      .attr("transform", "translate(" + (this.margin.left + 100) + "," + this.margin.top + ")");
  }

  private initAxis() {
    this.y = d3Scale.scaleBand().rangeRound([0, this.height]).padding(0.1);
    this.x = d3Scale.scaleLinear().rangeRound([this.width, 0]);
    this.y.domain(this.STATISTICS.map((d) => d.qua));
    this.x.domain([d3Array.max(this.STATISTICS, (d) => d.value + 2), 0]);

  }

  private drawAxis() {
    this.g.append("g")
      .attr("class", "x")
      .attr("transform", "translate(0," + this.height + ")")
      .call(d3Axis.axisBottom(this.x).tickSize(-this.height))
      .selectAll("text")
      .attr("dy", "1em")
      .selectAll("path")
      .attr("class", "opac")
      .style("stroke-opacity", "0")
    this.g.append("g")
      .attr("class", "y")
      // .attr("transform", "translate(0," + (- ((document.getElementById("svg1").parentElement.offsetWidth / 3) * 10) / 100) + ")")
      .call(d3Axis.axisLeft(this.y).tickSize(-this.width))
      .append("text")
      .attr("class", "axis-title")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")

  }

  private drawBars() {
    var i = 0;
    var trans = this.g.selectAll(".bar")
      .data(this.STATISTICS)
      .enter().append("rect")
      .style("fill", (d: any) => { i++; return this.colorrange[i]; })
      .attr("y", (d) => this.y(d.qua))
      .attr("height", (this.y.bandwidth()))
    // .attr("height", 60)
    trans.transition()
      .duration(2000)
      .delay(function (d, i) {
        return i * 50;
      })
      .attr("x", (d) => 0 /*this.x(d.AverageValue)*/)
      .attr("width", (d) => /* this.height -*/ this.x((d.value == "" ? 0 : d.value)))

  }

  private drawLabel() {
    this.g.selectAll('.label')
      .data(this.STATISTICS)
      .enter().append('text')
      .attr('class', (d) => this.x(d.value) < 50 ? 'label bar-value-2' : 'label bar-value')
      .style('font-size', (d) => (this.y.bandwidth() < 30 ? this.y.bandwidth() * 0.7 : 14) + 'px')
      // .attr('x', (d) => this.x(d.AverageValue) < 40 ? 40 : this.x(d.AverageValue) - 7)
      .attr('x', 100)
      .attr('y', (d) => this.y(d.qua) + this.y.bandwidth() * 0.5 + 6);

  }

我正在用不同的方法调用所有这些方法以获得结果：

setTimeout(() => {
            this.initSvg()
            this.initAxis()
            this.drawAxis()
            this.drawBars()
            this.drawLabel()
          }, 500);

注意：

STATISTICS = [
{qua: "Yes", value: 1}
{qua: "No", value: 1},
];

试图在x域中更改某些内容，但没有成功。老实说，我是d3的新手，这就是为什么不知道在哪里进行更改的原因。

需要进一步的帮助。谢谢。

在x轴上只需要整数-d3

0 个答案: