I'm putting together a d3 visualisation using force layouts for use in in the Qualtrics questionnaire website. Everything seems to be working across the different browsers in a jsfiddle. Its possible to drag exemplars from the exemplar box (African male for e.g.) onto the main canvas. One can right-click on a node in the main canvas to bring up a right-click menu to change the node properties or drag the nodes around the canvas.
javascript too large to paste.
Note that the jsfiddle works in Internet Explorer 11. However, when I add this visualisation to the Qualtrics website it breaks in IE11. Far more SVG elements are added than there is data, as shown in the image below.
Note that this combination of Qualtrics and d3 visualisation works fine in Firefox, Chrome and Safari. Unfortunately the Qualtrics support team doesn't support custom code and I'm not proficient enough in javascript to track this down. Any ideas on what might cause this?
For this to work in Qualtrics:
Add the d3.js library in the Qualtrics header
Uncomment Qualtrics.SurveyEngine.addOnload
Comment out create_d3_interaction(false);
Update 1
I've debugged this a bit more.
In the update_svg_node method I do a selection of the SVG element:
var svg = d3.select('.' + svg_class);
var nodes = svg.selectAll('.' + class_id)
.data(f.nodes());
The problem seems to occur in the selectAll -- for some reason it is not matching the class selection with the data. Note this only happens in Qualtrics and IE11 but works fine in IE11 in the fiddle. Note this is an updated version of the fiddle, but the problem still occurs the same way.
So nodes that should be in the UPDATE class are in the ENTER class for some reason.
Related
I have my text appended to div inside a foreign object.
The text renders fine in chrome but does not show at all in the IE.
I have researched on it and it seems that IE does not support foreign object.
Is there a work-around that will make it work in IE??
P.S. I am using d3.js to create circles and my foreign object is in the circle.
I have used foreign object to overcome text alignment issues.
Thanks for the help in Advance.
IE9 does not support foreignObject. Check out the "Browser Compatibility" table at the bottom of the MDN page: foreignObject.
I've been working on making a map related visualisation in D3 for a site that for historical reasons is stuck using some old versions of jQuery, and I've come across a weird bug when implementing drag behaviour on the map.
I've extracted the D3 code, and put it onto a gist listed below, and been able to replicate the strange behaviour, which you can trigger by:
Try loading the page below
Clicking on a country
Trying to select some text
I can't seem to select text after I've zoomed into a country, and I suspect it's down to line 130 in the d3_map.js file
The problem gist
The gist is here:
https://gist.github.com/mrchrisadams/89d053977513e6042adf
The rendered gist on http://bl.ocks.org, is here:
http://bl.ocks.org/mrchrisadams/89d053977513e6042adf
On the strange mismatch of javascript libraries
It's strange to see such an old version of jQuery, I know. I'm unable to change it without breaking other functinality on the site, which is why we're stuck with the old library.
Why is this happening, and how do I reinstate normal text selection again?
I'm utterly stumped as to why triggering a zoom knocks out the ability to select text, and I'd welcome any pointers, because I'm somewhat at a loss now.
Oh well, fingers crossed...
I'm finding a very annoying behaviour on Chrome.
I've a page where I'm using a js graph library to build Gantt diagrams with vacation days of company workers.
The library uses HTML5 canvas to draw the graph, and the page just loads data based on date and department parameters and feeds the library methods.
Both, Firefox and Chrome, work perfectly and draws the Gantt diagrams as expected, however, when I try to print it, I find that Chrome changes the diagram if I alter any of printing attributes on page configuration dialog.
Also, after closing printing dialog, the graph on the page gets also changed.
Printing in Firefox hasn't any effect on the page and doesn't redraws the graph when changing printing parameters.
I've been looking for info into this on internet but found nothing except a maybe related bug on Chrome from 2014 that seems to be fixed.
I'm a bit lose with this and would appreciate any insight on the matter.
I'm using Google Charts to create charts on my app.
Due to some limitations of the api, after the generation of the svg I change some elements using direct JS manipulation. I do things like add text and move elements.
This works perfectly on Android, but on iOS my changes are ignored.
Here is the expected result using Android. I moved the label and update it after the svg generation.
And here the result on iOS. Label not moved and not updated.
How to fix this issue? I read something about add xmlns="http://www.w3.org/2000/svg" version="1.1", but the generation of the svg is responsability of Google API.
The problem was that everytime I was comparing a text or change a text I was using innerHTML and not textContent. The right was is always use textContent when dealing with the <text> element of SVG.
I'm currently working on a WYSIWYG solution and need a function to correctly select with a range a node (by this I mean the node itself, not only it's content)
DOM lvl2 clearly have a function for this w3.org/ranges and define that
range.selectNodeContents() // Select the contents within a node
and
range.selectNode() //Select a node and its contents
The problem is that when selectNode() perfectly work with Firefox or even ie9, it seem to be impossible to achieve with any Webkit browser (at last Chrome and Safari). On Webkit both selectNodeContents() and selectNode() select the node content only (which according to the specs seems to me to be a bug)
To make it work I tried to emulate the selectNode() goal by using
range.setStartBefore(node);
range.setEndAfter(node);
but the result is still the same, it work everywhere (ie>8 of course) but not on webkit browsers..
If you want to try it I made a little jsfiddle with which you can play here (just open the console and look at the console.warn result which is not the same on webkit :/ )
I searched a lot but I can't find a way to actually select a full node on webkit browsers.
By miracle would some of you know a way to do it or even just any tip to continue my quest ? :/
ps : I know "rangy" lib but I can't use it in my project and ,from what I read in the source, I'm not even sure they deal with that thing anyway :/
The problem is not with selectNode(), which works fine in WebKit, but with WebKit's selection object, which mangles ranges to fit in with its own (not always unreasonable) idea of where selection boundaries and caret positions are allowed to be. There are bugs filed against this with WebKit:
https://bugs.webkit.org/show_bug.cgi?id=23189
https://bugs.webkit.org/show_bug.cgi?id=15256
You're right, Rangy does not deal with this, preferring instead to reflect the reality of the browser's native selection. Pretending the selection is different would quickly lead to odd behaviour.