Vaadin 7 + d3.js : problem with getBBox()

Hi,
​This is my first post on this forum. I’ve started to work with Vaadin (great tool) some days ago and I’m facing my first problem.
I’m trying to integrate the framework d3.js (http://d3js.org/​), mainly to integrate directed acyclic graphs (with https://github.com/cpettitt/dagre-d3/wiki)
I’m not successful for the moment.
​After diving in some javascript debugging, I’ve discovered that there is a problem while rendering SVG.

​text.node(...).getBBox is not a function. D3 make an intensive use of this get Boundary Box function.
​I suppose that the function is called before the SVG have been rendered, so the boundary box can’t be evaluated, but I can’t find a workaround.
I’ve written a small test to reproduce the problem :

Vaadin UI :

@Override public void init(VaadinRequest request) { VerticalLayout layout = new VerticalLayout(); layout.setWidth("1000px"); layout.setHeight("600px"); setContent(layout); layout.addComponent(new JsSupervision("test")); }​ Vaadin Component :

[code]
@JavaScript({“d3.v3.min.js”, “dagre-d3.js”, “test.js”})
public class JsSupervision extends AbstractJavaScriptComponent {

public JsSupervision(String xhtml) {
    getState().xhtml = xhtml;
}
@Override
protected JsLabelState getState() {
    return (JsLabelState) super.getState();
}

}
[/code]test.js (based on http://bl.ocks.org/mbostock/1160929​)

com_softbridge_viewer_components_javascripts_JsSupervision = function() { var e = this.getElement(); var svg = document.createElement('svg'); e.appendChild(svg); this.onStateChange = function() { renderGraph(e); } } this.renderGraph = function(e) { var svg = d3.select("svg") .attr("width", 960) .attr("height", 500); var text = svg.append("text") .attr("x", 480) .attr("y", 250) .attr("dy", ".35em") .attr("text-anchor", "middle") .style("font", "300 128px Helvetica Neue") .text("Hello, getBBox!"); [size=4] var bbox = text.node().getBBox(); // fail [/size] var rect = svg.append("rect") .attr("x", bbox.x) .attr("y", bbox.y) .attr("width", bbox.width) .attr("height", bbox.height) .style("fill", "#ccc") .style("fill-opacity", ".3") .style("stroke", "#666") .style("stroke-width", "1.5px"); } Thanks
Franck

Hi Franck,

I am also new to Vaadin but I am tackling a similar D3-Vaadin related task. Although I am not familiar with the problem you are having, in the following
small example
of a collapsible tree graph using d3 in vaadin I am able to draw the SVG containing the graph.

Cheers,
Steliyan

Hi Steliyan
Thanks for the feedback. We have the same approach to integrate the 2 frameworks
​I just found my problem with getBBox. My way to instantiate svg element from DOM was wrong (I was producing a generic HTMLElement)
Letting d3 instantiate is better :

var graph = d3.select(e);
var svg = graph.append("svg")
.attr("width", 960)
.attr("height", 500);