We use in our project d3.js and the "gradient that follows a stroke" like in this example:
http://bl.ocks.org/mbostock/4163057 but it doesn't work as expected in Firefox. Then we discovered - it is only a problem in firefox... To visualize the problem and for easier understanding I changed the draw points in the example and these are the results:
Any suggestions for a workaround?
Related
It is very simple question, but I am stuck for 2 days and starting believe in magic.
Well, I just need to simple rotate Y axis label vertical. jqPlot docs and examples say that I have to use:
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
I did, but it still does not work. I even tried to copy-paste jqPlot example to my project and it does not work properly as well! And yes, I connected canvasAxisLabelRenderer.js and canvasTextRenderer.js. Here, please check my jsfiddle: http://jsfiddle.net/gu3Cr/5
UPD:
Just noticed, that it doesn't work only at Chrome (ver. 34). At mozilla firefox 28 it works. But it's still a problem, because jqPlot examples work properly at Chrome.
Your example code is fine, but your JSFiddle has an issue with script references. In the Chrome console I see this:
Refused to execute script from 'https://bitbucket.org/cleonello/jqplot/raw/e8af8a37f0f14ea1e8c630ecfe6f1b1933794036/src/plugins/jqplot.canvasAxisLabelRenderer.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
I removed that reference and added a link to http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisLabelRenderer.min.js and it works OK. See modified example here:
http://jsfiddle.net/LuQh7/
I am working on animating a line graph using d3.js, and have been closely following this example. The code I have written works just like the example...but the bug I am trying to fix is one that is also unfixed in this example. (So going forward, just follow that link to see the bug for yourself)
In Chrome and IE10, the chart works just as it is supposed to. However, in Firefox, the line does not just draw itself from left to right. Instead, the page loads with the line already displayed, then the line erases itself from left to right, and then finally draws itself (again) from left to right like it should have done in the first place.
Also notice that the line drawing is twice as fast on firefox as the other browsers - this means that the issue is with the transition itself: the transition of the stroke-dashoffset property is handled differently by firefox and the other browsers. Specifically, if we remove the transition from the equation, the main difference becomes evident: With stroke-dashoffset set to totalLength, Firefox displays the entire path, as opposed to none of it, like the other browsers do.
So my question is: is this a bug, or is this bad form on my (and duopixel's) part? If the former is the case, does anybody know a workaround or a fix? If the latter, I would be very grateful if you could show me the correct way to do this!
I like the d3 sortable bar chart example:
Unfortunately, it doesn't appear to work correctly in v2 (the example uses v3). At first, I thought it was me, so wrote a new example from scratch. Alas, it wasn't! In v2 the x axis labels don't transition with the bars; in v3 both labels and bars transition together.
Can anyone suggest a workaround for v2?
Thanks in advance.
Okay, I think there are two solutions to this problem. As Robert Harvey pointed out, you could use v3. The main difference that I can see so far is that d3.tsv (and possibly the other read data methods) take an additional parameter: this was what was causing the other parts of my code to fail. So, even though v3 isn't the latest release, this is my preferred solution.
The second solution is to transition the axis labels explicitly. This would take more code and as v3 is (hopefully!) on the horizon, might only be necessary if you really can't wait and absolutely must use v2.
I'm trying to animate text with RaphaelJS, but I'm encountering a choppy animation ("judder"?). I've looked around for other issues regarding this, but I've only been able to find jQuery-specific or non-SVG topics so far. Please let me know if I overlooked a similar question!
Essentially, I'm attempting to visually wrap a text element in a rect element and translate them simultaneously through an animation. I know about the 'g' element, but I don't want to use it since older versions of Internet Explorer don't support it. Instead, I'm using separate Raphael animations for the text and the rectangle:
var raphRect = paper.rect(
(paperWidth/2)-rectWidth/2
,paperHeight-rectHeight
,rectWidth
,rectHeight
,rectHeight/2
)
...
,raphText1 = paper.text(
paperWidth/2
,paperHeight-(2*fontSize)
,'this is jumpy text?'
)
...
raphRect.animate({y : -rectHeight}, risingTime, 'linear');
raphText1.animate({y : -2*fontSize}, risingTime, 'linear');
I'm assuming that the judder is caused by rounding pixels in each animation frame for the text element. Is there any way to mitigate or prevent this judder? (Reducing the animation time is not an option...and it doesn't even look like it helps.)
(I have an example of what I'm trying to do here. I've included two lines of text and a bold stroke for the rect to emphasize the judder.)
I had the same problem and have tried to differentways to solve it. I have found few hacks that works for me. But they all have the same idea: you should make text not so straight.
"transform" : "R 0.01"
For example, it rotates your text on small angle. Here is the result:
jsfiddle.
I can't garantue that it will work in your browser. In stable Chrome 36 it works good, in beta or canary worse.
You could also try no so straigth font jsfiddle. It works good for FF.
"font-family" : "Comic Sans MS"
Other things worse to be tried:
inreasing font size
using bold font
using a text path
This idea is actually borrowed from Robert Longson's information about the text-rendering property. It's true that Raphael doesn't provide direct access to this functionality, but it does provide you with a link to the dom node -- so it is but a second step to apply this style yourself, and it does indeed produce better results in Firefox at least.
Using jquery:
$(raphText1.node).attr( 'text-rendering', 'geometricPrecision' );
$(raphText2.node).attr( 'text-rendering', 'geometricPrecision' );
Staged here.
I am using three.js to do some online interactive modelling of geology, and have been creating image URI using the Canvas Element (output would be: data:image/png;base64,).
The image creation works fine in Chrome,Firefox, and Safari, but using the images in three.js as a texture doesn't show up in Firefox.
The simplest demonstration I can show is by changing one line of a three.js example, to substitue an image URL for a dataURI, and use that as a texture.
http://visiblegeology.com/renderingProblem/
This works fine for me in Chrome and Safari, but just doesn't show up in Firefox.
I was wondering if anyone had any advice, work-arounds, or thoughts.
Thanks for any help,
Rowan
I've checked using a regular img tag. It works that way in Firefox. So the problem would seem to be the combination of three.js and the data uri.
This example by mrdoob doesn't work in Firefox either: http://mrdoob.github.com/three.js/examples/webgl_particles_shapes.html
A few suggestions:
check if you are using the latest three code.
try removing the final equals sign of the data uri. It is used for padding and may not be necessary.
try disabling your add ons one by one, as they may interfere as well