Блог

Я создал диаграмму области d3js, которая выглядит следующим образом, я предоставил конфигурацию ниже:

Моя конфигурация:

 <svg id="area2" />
<svg id="area" />

data = [
    { x: 'TC11', y: 2, },
    { x: 'TC10', y: 3, },
    { x: 'TC9', y: 2, },
    { x: 'TC8', y: 1.5, },
    { x: 'TC7', y: 2, },
    { x: 'TC6', y: 2, },
    { x: 'TC5', y: 3, },
    { x: 'TC4', y: 1, },
    { x: 'TC3', y: 2, },
    { x: 'TC2', y: 1.5, },
    { x: 'TC1', y: 2, },
  ];
  margin = { top: 20, right: 20, bottom: 40, left: 50 };
  width = 675 - this.margin.left - this.margin.right;
  height = 75 - this.margin.top - this.margin.bottom;
  svg;

 this.svg = d3.select("svg#area")
      .attr("width", this.width   this.margin.left   this.margin.right)
      .attr("height", this.height   this.margin.top   this.margin.bottom)
      .append("g")
      .attr("transform", "translate("   this.margin.left   ","   this.margin.top   ")")


    var x = d3.scalePoint()
      .domain(["TC11", "TC10", "TC9", "TC8", "TC7", "TC6", "TC5", "TC4", "TC3", "TC2", "TC1"])
      .range([0, this.width]);

    var y = d3.scaleLinear()
      .domain([0, d3.max(this.data, function (d) { return d.y; })])
      .range([this.height, 0]);

    var xAxis = d3.axisBottom(x);

    var area = d3.area()
      .x(function (d: any) { return x(d.x); })
      .y0(this.height)
      .y1(function (d: any) { return y(d.y); });

    this.svg.append("path")
      .datum(this.data)
      .style("fill", "#D04242")
      .attr("d", area);

    this.svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0,"   this.height   ")")
      .call(xAxis);

  
 

Теперь я хочу разместить эту диаграмму, которую мы создали, на изображении, если у меня есть изображение?

Мне нужно сделать что-то подобное. Как мы можем это сделать? Можно ли вообще размещать диаграммы d3js на изображениях? Пожалуйста, помогите