30:T809,{ const svg = d3.select(DOM.svg(width, 200)); svg.append("defs").append("marker") .attr("id", "head") .attr("orient", "auto") .attr("markerWidth", 2) .attr("markerHeight", 4) .attr("refX", 0.1) .attr("refY", 2) .append("path") .attr("d", "M0,0 V4 L2,2 Z") .attr("fill", "#000000"); svg.append("line") .attr("x1", width/2-100) .attr("y1", 70) .attr("x2", width/2-100) .attr("y2", 110) .attr("stroke", "#999999") .attr("stroke-width", 2) .attr("marker-end", "url(#head)"); svg.append("text") .attr("x", width/2-80) .attr("y", 90) .attr("font-style", "italic") .text("g"); svg.append("line") .attr("x1", width/2+20) .attr("y1", 180) .attr("x2", width/2+70) .attr("y2", 180) .attr("stroke", "#999999") .attr("stroke-width", 2) .attr("marker-end", "url(#head)"); svg.append("text") .attr("x", width/2+80) .attr("y", 186) .attr("font-style", "italic") .text("f"); svg.append("text") .attr("x", width/2+20) .attr("y", 166) .attr("font-style", "italic") .text(d => "\u03B8"); svg.append("rect") .attr("x",width/2-40) .attr("y",170) .attr("width", 80) .attr("height", 20) .attr("fill", "#0000F0"); svg.append("circle") .attr("cx", width/2-25) .attr("cy", 190) .attr("r", 6) .attr("fill", "#000000"); svg.append("circle") .attr("cx", width/2+25) .attr("cy", 190) .attr("r", 6) .attr("fill", "#000000"); svg.append("line") .attr("x1", width/2) .attr("y1", 170) .attr("x2", width/2+20) .attr("y2", 100) .attr("stroke", "#090484") .attr("stroke-width", 3); svg.append("circle") .attr("cx", width/2+20) .attr("cy", 100) .attr("r", 6) .attr("fill", "#090484"); svg.append("path") .attr("d", d=> {return "M"+(width/2-4)+",180 a1,1 0 0,0 14,-24";}) .attr("fill", "none") .attr("stroke", "#000000") .attr("stroke-width", 1); return svg.node(); }31:T47a,viewof button = { const form = html`