0

我想使用 d3.js 创建一个动态垂直规则，就像这里的那个：http: //bost.ocks.org/mike/cubism/intro/demo-stocks.html。

我之前在这里询问过如何使用 HTML 创建一个（在 d3 中创建动态垂直规则），但是使用 HTML 的解决方案在立体主义 svg 上不是很有效，因为它会闪烁并消失。

我现在想用 SVG 创建一个。

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

任何帮助是极大的赞赏。

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

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

4

1 回答 1

0

就像 Lars 指出的那样，该栏可以是现有 svg 的一部分。

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

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/

于 2013-04-27T00:38:21.457 回答