Trouble with selecting foreignObjects, workarounds? bug?

[ThomasWrobel]

a) Great project, really usefull to me as I am working on a open source semantic database that could do with some nice visuals.

b) I wish to use GWT widgets as nodes in my flowchart. I thought I could do this by using foreignObjects in the svg. However, the selectall function cant find them once added;

updateSelection = svg.selectAll("foreignObject").data( showPoints ? points : new ArrayList());

This will always return a empty selection. I think this is a bug in webkit , not gwt-d3, in regards to camelcase selectors;

https://bugs.webkit.org/show_bug.cgi?id=46800 Not sure though.

The workaround I have seen elsewhere is to use; svg.selectAll(document.getElementsByTagName("foreignObject"))

But gwt-d3 doesnt yet support that method of selection.

What does work, however, is ;

D3.selectAll(RootPanel.get().getElement().getElementsByTagName("foreignObject"));

However, that has the wrong parent. Amending new elements using ____.enter().append("foreignObject") Wont work, as that would add it to the docucments root.

So my question is, is there a way to use widgets in gwt-d3 that I have overlooked? Or perhaps a way to select using the RootPanel, but then somehow force the selection to think its parent should be svg? It seems, if it isnt possible yet, purhaps gwt-d3 should support in the future? Mixing gwt widgets with d3 layout would be very powerfull.

Sorry if this query is in the wrong place, as it covered a few issues I didnt know where to put it.

[anthonime]

Hi,

a) thank you

b) I cannot help you very much but here are some of my thoughts:

• are you sure "foreignObject" is supported on the browser you target ? Be careful with this SVG feature that is not supported in IE
• maybe there is a namespace problem: I have already experimented it once. D3 handles svg namespace transparently , but GWT do not, which means that if you created a SVG node with D3, you cannot find it using Document.getElementsByTagName, unless you use doc.getElementsByTagNameNS("foreignObject", "http://www.w3.org/2000/svg"). (you will note that getElementsByTagNameNS is not part of the gwt Document API, so you need to call it from JSNI code). My remark does not solve your problem at all, but it is still good to know and may save you some time in the future ;)
• Indeed, "Selection.selectAll( list or array of nodes)" does not exist in gwt-d3, and it does not exist either in d3.js as far as I know. However, "Selection.selectAll(functionReturningAListOrArrayOfNodes)" does exist in d3.js but not yet in gwt-d3, as stated in the "TODO" tag of the Selection.selectAll method. If you wish, you could send a pull request to add this method, and a test case in TestSubselections in the gwt-d3-demo project. I do not have a lot of time and always appreciate any contribution
• I filed a new issue https://github.com/gwtd3/gwt-d3/issues/91
• I have also the need to mix gwt widget into d3 layouts for one of my projects, but I think I will start by using some absolute positioning in conjunction with SVGLocatable.getScreenCTM() as a workaround/hack.

[ThomasWrobel]

• Cheers for the reply. Theres a lot of useful information there. The namespace problem is probably part of the issue. I am using Chrome, so foreignObject is supported.
• I have, however, come up with a workaround that seems to be working that avoids foreignObject completely. (excuse the crudeness of it)

I first use a absolute panel (node_panel)

panelcontainer = D3.select(node_panel.getElement());

Then I select all things with the class "TestNode"

updateSelection = panelcontainer.selectAll("._TestNode_").data( showPoints ? points : new ArrayList<VisualNode>());

Then I use left and top styles to set the position of existing widgets:

updateSelection.style("left", new DatumFunction<String>() { @Override public String apply(Element context, Value d, int index) { return d.<VisualNode> as().x+"px"; } })

Critically, and hack-ish, I then use this to add new widgets on enter;

//Not really a select statement, but rather a way to manual add a new element to the page without effecting anything else.
updateSelection.enter().select(new DatumFunction<Element>() {
                                @Override
                                public Element apply(Element context, Value d, int index) {

                                                                    VisualNode current = d.<VisualNode> as();

                                node_panel.add(current.associatedContainer,(int)current.x,(int)current.y);
                                current.associatedContainer.setStylePrimaryName("_TestNode_");

                                return null;
                                }
                            })

By using gwts node_panel.add() it ensures all the handlers are set up correctly. Setting the style ensures D3 can find the widget again.

And of course;

    `updateSelection.exit().remove();`

This all seems to work. "associatedContainer" is just a gwt widget that is stored with the co-ordinate values. Adding and removing items from the VisualNode list adds and removes widgets from the page. Changing co-ordinates, changes the positon without removing/re-adding. I have only tested this very vaguely though - whether it stands up when used in a big flowchart (like I plan) I dont know.

• The project I am developing (http://darkflame.co.uk//GreenFruitEngine2/GreenFruitEnginev2.html) will need a solid, flexible, flowchart system for its output. I developed a crude one myself, but D3 GWT...especially once forces are supported....makes a lot more sense to use. Thus once I am confident enough I understand everything about D3, I will probably contribute where I can to this project, as it synegises well with my own.