使用svg在d3中创建规则

我想使用d3.js创建一个动态垂直规则，就像这里的规则一样：

我之前在这里（）问过如何使用HTML创建一个，但是使用HTML的解决方案在cubism svg上不是很有效，因为它会闪烁并消失

我现在想用SVG创建一个

我已经尝试使用这里的代码（）创建了一个，但是我无法将其定位在现有svg之上，并使其动态更新

非常感谢您的帮助

编辑：现有的svg是由一个名为cubism.js的d3插件创建的，因此我无法访问底层的svg。虽然它本身工作得很好，但这个svg会像这样向下推其他元素（svg行在左手边）：

---

我希望规则位于现有图形之上，这就是为什么我提到定位在另一个svg之上。对不起，如果我第一次没有说清楚的话。

就像Lars指出的那样，这个条可能是现有svg的一部分

使用svg而不是DIV实际上使代码更加简单：

javascipt：

d3.select('#svg').on('mousemove', function() {
    var xpos = d3.event.pageX;
    d3.select('#bar').attr('x', xpos);
});

html:

---

您不需要将其放置在现有SVG上，您可以将其作为SVG的一部分。你能把你到目前为止试过的东西的代码贴出来吗？

<svg id="svg"width="500" height="500">
    <ellipse cx="125" cy="125" rx="125" ry="10" fill="red" />
    <rect id="bar" x="10" y="0" width="10" height="500"></rect>
</svg>