Wie positioniere ich HTML-DIV-Elemente relativ zu SVG-Elementen?
Ich habe D3 verwendet, um das SVG-Diagramm zu erstellen:
Ich möchte neben der Legende in der unteren rechten Ecke ein Dropdown-Menü hinzufügen. Ich habe zwar das entsprechende Element (ein normales HTML-DIV-Element), weiß aber nicht, wie ich es richtig im Diagramm positionieren soll.
Ich verstehe die Positionierung von SVG-Elementen, weiß aber nicht, wie man so etwas wie ein DIV-Element anwendet.
Irgendwelche Ideen außer der Platzierung außerhalb des Ansichtsfensters (wie unten)?
查看CSS 位置。您可以创建一个相对定位的 DIV 来保存您的 SVG。然后，您可以在其顶部放置一个绝对定位的 DIV 以容纳
select元素；您可以使用它的left和top样式将第二个 DIV 放置在任何您想要的位置。所有内容都放在一起了：
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); }