After upgrading from d3 3.1.9 to 3.1.10, animations on my d3 svg visualizations broke.
My guess it's related to this commit (removal of old functionality), and that I'm using an old api.
https://github.com/mbostock/d3/commit/d9659b6794fa1985c756d2a7d8ee73174e54ee08
Even the most simple transition fails (moving a group element 75 pixels to the right):
d3.select('g.slider').transition().duration(500).attr('transform','translate(100,0)');
I have similar transitions on other elements that will start the same time as above transition. Could there be a conflict where transitions cancel each others, even though they're on completely different elements? I hope I'm just using the (new?) API the wrong way?
Please note that it all worked great on 3.1.9. I've tried following this guide from Mike (transitions with d3.js 3), but the api looks the same, so I'm stuck:
http://bost.ocks.org/mike/transition/
edit: I'd be surprised if I'm the only one experiencing this issue. All visualizations with animations I've created over the years with d3 stopped working when moving from 3.1.9 to 3.1.10
Please use GitHub issues to report bugs.
And please create a full example that demonstrates your unexpected behavior rather than quoting a code snippet out of context. I can’t reproduce the behavior you’ve described. Here is your snippet working correctly inside a full example, http://bl.ocks.org/mbostock/b4e46124258d1b75accb:
slider.transition()
.duration(1000)
.attr("transform", "translate(100,0)");
D3 has thousands of tests and hundreds of examples, many of which include transitions and animations, and none of which were affected by this change. Do all of your visualizations use this obscure, undocumented feature in d3.timer? I’m very surprised that this change affected your code, and I definitely don’t expect it to be widespread.
Please followup on GitHub issues if you are still experiencing unexpected behavior and can provide more detail for me to investigate.
For anyone else having issues with transitions in d3 >= 3.1.10, I was loading date.js library which breaks d3.js due to overloading the Date.now() method.
I suggest not to use date.js, but here's an issue which aims to have d3 do something more graceful instead of silently failing.
See this d3 issue: https://github.com/mbostock/d3/issues/1302
Related
I'm looking to create some visualisations for my neo4j data, and there are some really nice settings in use in the browser that's bundled with it, but there seem less than straightforward to emulate when using d3 - my setup was based on the neo4j visualisation guide at http://neo4j.com/developer/guide-data-visualization/ but this guide doesn't really get you anywhere near what the browser achieves.
For example, I'm looking to emulate:
multiple curved path between nodes
paths which end at the edge of the node, and not the center
graph initialised in a static position (though could probably just hide until d3 presumably fires some event)
I've not seen any official CSS/JS release to get the same effects, so I guess it's assumed the user will code from scratch. Are there any other options for quickly achieving this?
Many thanks
I think that's kind of the holy grail. If you make it, would you share it with us? ;)
In the meantime, sigma.js is a pretty nice library. Linkurious even released a set of tools on top of it to do even more:
https://github.com/Linkurious/linkurious.js
I have tested with various graphs and this seems like a consistent problem.
I have a highstock graph, if you draw a lot of data and zoom out to the full view of the graph by using the sliders or the range selector, the whole graph draws all messes up.
I found an example fiddle that illustrate the issue.
http://fiddle.jshell.net/highcharts/qgprf/show/
I've used Chrome to get the path that highstock generated and then plotted just the path:
http://jsfiddle.net/MsFhh/
It's obvious that highstock is creating some tomfoolery.
For the sake of stackoverflow, here's some code
alert("I R code"); //Copying the huge svg path in here is kinda insane
Is there something that I can do to fix this?
PS: if I upgrade to the new highstock version, everything in our graphs breaks so updating is not an option :(
This is known bug of Highstock 1.3.0, alread y fixed in 1.3.3+. Reported here. You can modify sources to fix issue, or upgrade to latest version.
If you have issue with upgrading - let us know what kind, and we will try to fix them. Of course working fiddle with that issues is really appreciated.
The bug has been fixed. The fix for version 1.3.5 can be found here:
https://github.com/highslide-software/highcharts.com/issues/1651#issuecomment-25226662
Don't use the patch though. It doesn't fully fix the issue. It seems like 1.3.6 fixes everything that were causing the defect.
The patch can be seen here:
https://github.com/highslide-software/highcharts.com/commit/9607afd512473710b6aeb9bfceaf23549d285ff0
I am looking for an html5/css/javascript chart library that supports the "follows" on line charts with mobile.
To be precise on what am I refering to by "follows" on line charts, here are good examples:
http://code.shutterstock.com/rickshaw/examples/extensions.html
https://google-developers.appspot.com/chart/interactive/docs/gallery/trendlines
even slightly different, this one would be nice also
http://www.flotcharts.org/flot/examples/tracking/index.html
I have made some tests using the extensive comparison provided here. Unfortunately, I was not able to find a line chart demo with "follows" that worked "out-of-the-box" with both Chrome and Chrome Android. Chrome is my targeted browser for now, I am writing a non commercial app just for fun.
It seems that most of these implementations are based on :hover css selector which is not available for mobile. I tried to bind the :hover logic with the "touchmove" but it was not straightforward (with rickshaw at the very least).
My question is: am I missing a library or an option in the existing libraries or should I keep on trying to implement my custom logic ?
You missed amCharts in your list, it does support "follows", for example:
http://www.amcharts.com/javascript-charts/line-with-duration-on-value-axis/
Note, you should set chart.panEventsEnabled = true in order touch events to work on mobile.
Disclaimer - I am the author of amCharts and amMap.
you can try echarts, it's really good at rendering large data and does supoort "follow", here's the example and the code
http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-dataZoom-all
I use Highcharts 2.2.5 to draw a number of area and bar charts.
I Just upgraded my app to jQuery 1.8 and started testing all my charts.
All appear ok, but when I zoom an area chart, I get tons (literally hundreds) of JavaScript errors saying "Error: Problem parsing d=0.99030204037363" (numbers change, sometimes d=1) and on the screen all I see are a bunch of dots where the chart was.
Resetting the zoom doesn't work either (yielding more errors, and no result). The only recourse at that point is to reload the page.
I tried looking online for any clashes between HC 2.2.5 and jQuery 1.8 but couldn't find anything. Switching back to jQuery 1.7.2 solves the problem, but still, one must look ahead...
Any assistance is appreciated,
Guy
After reporting the bug on github, per #MrObrian's suggestion, I got this reply:
It is already fixed for the next release - see
http://jsfiddle.net/highcharts/GJ4wR/. We're running the final tests
on that code now, hope to have it out by next week.
So all I have to do is wait 1 week :)
I am trying to find some example code using a javascript library for a force directed graph in which the user can move any node around (and the graph responds dynamically) - but then each node can be clickable and open an "node detail" page (in a different tab).
I looked through D3.js, arbor.js, jit (javascript infoviz toolkit), springy. Those all look great and have demos which are close to what I want, but not quite there.
I'm not an experienced js programmer, I mostly do server side stuff.
My fear is that I might try to learn one of these libraries to try and implement my use-case only to find that it won't work for some reason. For example, one of these (D3) has a discussion in its forum that clicking a node is often mistaken for moving the node and there didn't seem to be a quick workaround. In another one (arbor.js), the front page (in addition to being minified) shows something close to what I want but the nodes which are movable are not clickable and the nodes which are clickable are not movable.
FF or Chrome is fine - I don't need IE support.
I am also open to something Flash based - as long as I don't need to compile anything in Actionscript/Flash - something with a js/html API.
Thanks.
I think that's a pretty good list of tools you have. Protovis?
I suspect it's actually not going to be much work to grab a click event from any JS-based tool-- but I haven't done that specifically with any of the ones you mention.
A couple years ago I did a prototype project using a pure Javascript implementation. Everything is just DOM nodes, so you can definitely grab clicks as necessary. It's fine, but since the code is not actively maintained (as far as I could find), I did have to do quite a bit to fit it to my needs. Using something with more recent and active development is a good idea. I also learned that performance was going to be an issue, especially in Firefox. You can play with my prototype and see where it breaks down-- which it does. I think 100 nodes or so is the danger point.
Good luck!