CODEWITHSUNDEEP
svgd3.js
user2286078
user2286078

Reputation:

Create a rule in d3 using svg

I want to create a dynamic vertical rule using d3.js,like the one here: http://bost.ocks.org/mike/cubism/intro/demo-stocks.html.

I asked how to create one using HTML previously here (Create dynamic vertical rule in d3), but the solution using HTML is not very effective over a cubism svg as it flickers and disappears.

I'd now like to create one using SVG instead.

I've tried creating one using the code here (http://www.dashingd3js.com/svg-basic-shapes-and-d3js), but I am unable to position it over existing svg and get it to update dynamically.

Any help is greatly appreciated.

EDIT: The existing svg is created by a d3 plugin called cubism.js, so I don't have access to the underlying svg. And while it works great by itself, this svg pushes other elements down like this (the svg line is on the left hand):

enter image description here I want the rules on top of the existing graphs, that's why I mention positioning over another svg. Sorry if I didn't make that clear the first time.

Upvotes: 0

Views: 1086

Answers (1)

Adam Pearce
Adam Pearce

Reputation: 9293

Like Lars pointed out, the bar can be part of the existing svg.

Using an svg instead of divs actually makes the code even simpler:

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/

Upvotes: 0

Related Questions