Хотите разместить изображение между X (0-100) и Y (0-140) координатами диаграммы d3

Question

Я зафиксировал координаты оси X и Y (0-140) на графике d3. Я хочу разместить изображение между определенными координатами X и Y, и я попробовал его с помощью приведенного ниже кода, но оно занимает одинаковое пустое пространство над и под изображением. Я не могу разместить изображение между перкулярным X (0-100) и Y (0 -140) осей. Как бы я достиг нужного изображения между осями X и Y.

Вот код диаграммы d3 -

    this.svg = d3.select('.line-chart-container')
        .append('svg')
        .attr('width', this.width + this.margin.right + this.margin.left)
        .attr('height', this.height + this.margin.top + this.margin.bottom)
        .append('g')
        .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);

    const xExtent = d3Array.extent(STOCKS_NEW, d => d.value);

    this.x = d3Scale
        .scaleLinear()
        .domain([0, 140])
        .range([0, this.width]);

    const yExtent = d3Array
        .extent(STOCKS_NEW, d => d.date);

    this.y = d3Scale
        .scaleLinear()
        .domain([0, 140])
        .range([this.height, 0]); 

    const xAxis = d3Axis.axisBottom(this.x).tickSizeOuter(0);

    const xAxisDraw = this.svg
        .append('g')
        .attr('transform', `translate(0, ${this.height})`)
        .attr('class', 'x axis')
        .call(xAxis);

    // Draw y axis.
    const yAxis = d3Axis
        .axisLeft(this.y)
        .ticks(5)
        .tickSizeOuter(0)
        .tickSizeInner(-this.width);

    const yAxisDraw = this.svg
        .append('g')
        .attr('class', 'y axis')
        .call(yAxis);

    this.svg.append('text')
        .attr('transform', 'translate(' + (this.width / 2) + ' ,' + (this.height + this.margin.bottom - 10) + ')')
        .style('text-anchor', 'middle')
        .text('Percentage of Target Enrollment Cycle Time Elapsed');

    this.svg.append('text')
        .attr('transform', 'rotate(-90)')
        .attr('y', 0 - this.margin.left)
        .attr('x', 0 - (this.height / 2))
        .attr('dy', '1em')
        .style('text-anchor', 'middle')
        .text('Percentage of Target Subject Randomized');

    this.svg.append('g')
        .attr('class', 'grid')
        .attr('fill', 'none')
        .call(d3Axis.axisLeft(this.y)
            .tickSize(-this.width)
        );
    // Image code
    this.svg.
    append("image")
        .attr('xlink:href', '../../assets/ag-grid_new111.png')
        .attr('width', this.x(140) - this.x(40))
        .attr('height', this.height)
        .attr('x', 0)
        .attr('y', 0);

Изображение диаграммы -