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)?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
LihatKedudukan 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和topdan 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); }