Letakkan elemen DIV dalam port pandangan SVG

Question

Bagaimana untuk meletakkan elemen HTML DIV berbanding elemen SVG?

Saya menggunakan D3 untuk menjana carta SVG:

Saya ingin menambah menu lungsur di sebelah legenda di penjuru kanan sebelah bawah. Saya mempunyai elemen yang sepadan (elemen DIV HTML biasa), tetapi saya tidak tahu cara meletakkannya dengan betul pada carta.

Saya faham kedudukan elemen SVG, tetapi saya tidak tahu cara menggunakan sesuatu seperti elemen DIV.

Ada idea selain meletakkannya di luar port pandangan (seperti di bawah)?

Answer 1

Lihat Kedudukan CSS. Anda boleh mencipta DIV yang agak kedudukannya untuk memegang SVG anda. Anda kemudiannya boleh meletakkan DIV yang diposisikan secara mutlak di atasnya untuk menyesuaikan gaya select 元素；您可以使用它的 left 和 top dan meletakkan DIV kedua di mana sahaja anda mahu.

Semuanya disatukan:

let w = 500;
let h = 300;
let pad = 10;
let xmin = -2 * Math.PI;
let xmax = 2 * Math.PI;
let ymin = -1.1;
let ymax = 1.1;

let svg = d3.select("#graph")
    .append("svg")
    .attr("max-width", `${w}px`)
    .attr("viewBox", [0, 0, w, h]);
    
let x_scale = d3
  .scaleLinear()
  .domain([xmin, xmax])
  .range([pad, w - pad]);
let y_scale = d3
  .scaleLinear()
  .domain([ymin, ymax])
  .range([h - pad, pad]);
let path = d3
  .line()
  .x((d) => x_scale(d[0]))
  .y((d) => y_scale(d[1]));

svg
  .append("g")
  .attr("transform", `translate(0, ${y_scale(0)})`)
  .call(d3.axisBottom(x_scale).tickFormat(d3.format("d")).tickSizeOuter(0));
svg
  .append("g")
  .attr("transform", `translate(${x_scale(0)})`)
  .call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
  
d3.select('#function')
  .on('change', function() {
    draw_graph(this.value)
  })
  
  
draw_graph('sine')
  

function draw_graph(f_string) {
  svg.select('path.graph').remove()
  let f
  if(f_string == "sine") {
    f = Math.sin;
  }
  else {
    f = Math.cos;
  }
  let pts = d3.range(xmin, xmax, 0.01)
    .map((x) => [x, f(x)]);
  svg
    .append("path")
    .attr('class', 'graph')
    .attr("d", path(pts))
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("stroke-width", 3);
}

<script src="https://d3js.org/d3.v7.min.js"></script>

<div style="position: relative" id="viz">
  <svg id="graph" width=500 height=300 style="border: solid 2px black"></svg>
  <div style="border: solid 0.5px black; background-color: rgba(255,255,255,0.7); position: absolute; left: 20px; top: 30px">
    <label for="function">function:</label>
    <select name="function" id="function">
      <option value="sine">sine</option>
      <option value="cosine">cosine</option>
    </select>
   </div>
</div>