使用svg在d3中创建规则

Question

我想使用d3.js创建动态垂直规则，例如：http://bost.ocks.org/mike/cubism/intro/demo-stocks.html。

我曾问过如何在此处使用HTML创建一个（Create dynamic vertical rule in d3），但使用HTML的解决方案对于立体主义svg并不是非常有效，因为它会闪烁并消失。

我现在想用SVG创建一个。

我尝试使用此处的代码创建一个（http://www.dashingd3js.com/svg-basic-shapes-and-d3js），但我无法将其放在现有的svg上并让它动态更新。

非常感谢任何帮助。

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

我想在现有图表之上的规则，这就是我提到定位于另一个svg的原因。对不起，如果我第一次没说清楚。

Answer 1

像拉尔斯指出的那样，酒吧可以是现有svg的一部分。

使用svg代替div实际上使代码更简单：

javascipt：

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

HTML：

<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>

http://jsfiddle.net/q3P4v/4/