javascript - Problems when using the insert() function in d3 java library when trying to insert SVG elements before another -
i have problems using insert() function of d3 visualization library. better not understand how use "before selector". red examples here , here, dod not help.
i create svg element , append element it. append foreignobject-element group , afterward insert rectangle before foreignobject-element.
here code
var body = d3.select("body"); var svg = body.append("svg") .attr("width", '100%') .attr("height", '100%'); var group = svg.append("svg:g"); var html = group.append("foreignobject") .attr("x", 50) .attr("y", 25) .attr("width", 200) .attr("height", 100) .append("xhtml:div") .style("font", "14px 'helvetica neue'") .html("lorem ipsum dolor sit amet, consectetur adipiscing elit. donec eu enim quam."); var rect1 = group.insert("svg:rect", html) .attr("rx", 6) .attr("ry", 6) .attr("x", 5/2) .attr("y", 5/2) .attr("id", "rect") .attr("width", 250) .attr("height", 120) .style("fill", 'white') .style("stroke", d3.scale.category20c()) .style('stroke-width', 5);
here (non)working jsfidle example
edit: try passing id before select, shown here: http://jsfiddle.net/gctud/3/
var rect1 = group.insert("svg:rect", "#foreign_object")
you cannot select element tag name, constants (such id), specified in docs:
the name , before selector must specified constants, though in future might allow inserting of existing elements or function generate name or selector dynamically.
Comments
Post a Comment