I have a d3 plot where I want to dynamically change some of the points. Here is what the plot looks like before I change anything:
now if I go into the chrome console and try to change any of the circle properties (or removing it from the DOM), e.g. $($0).attr("r", "20") I get a square/box appearing over my plot, which disappears if I zoom in/out of the browser window or resize the browser window.
Any ideas why this is happening and how to prevent it?
In order to help debug I just copied the svg html (generated by d3) and posted it to codepen . I set up a click event to illustrate the problem, so click on any of the points to see the bug.
Related
I am working with charts that must resize dynamically. On calling the chart.setSize(containerWidth, containerHeight, boolean) method everything seems to resize appropriately except the svg element "highcharts-series-group". This element seems to remain fixed at the size that it had when the chart was created. The end result is that the parts of the graph that are outside of its "view box" are hidden.
Below are two images showing demonstrating this:
1: I minimized the screen for the initial creation of the chart
2: In the second image I have fully expended the browser further and applied the chart.resize() method which seems to work except as the image shows the "highcharts-series-group" svg element of the graph has not changed with this resulting in most of the group being hidden as it resizes beyond the "highcharts-series-group" boundaries.
Am I missing something?
EXTRA INFO:
The only work around I have managed right now for this is to destroy the chart and to recreate it whenever the window resize event is triggered.
This would be all good except this gives a bad user experience as the chart "blinks" when it is destroyed and then created.
The issue was the version. My organization was using version 2.0.2. Just updated to the latest (5.0.5) and the issue vanishes.
I have a multiline chart using D3, and the lines have nodes to mark the points. I also have legends below x-axis to display or hide each line when a user clicks on them. Similar to this example
The chart and legend selection works totally fine when I click normally on legends. But when I click rapidly on legends, one of the lines' nodes disappear. When I inspected the page, I found they got relocated to the top of the browser window(and not visible because there's no svg element there)
I don't even know what the problem is and where should I start debugging as it works fine with normal speed mouse clicks on legends.
I know it is very difficult for anyone to help without looking at the source code or a working fiddle, but I just wanted to know (before I try to reproduce the problem on fiddle) has anyone experienced something like this before? does mouse clicking speed affect how elements get rendered in D3? or this is not a D3 problem at all and some javascript/dom thing I am overlooking?
Some "strange" behaviour can occur depending on how your transitions are set up. For example, if there are many transitions attached to the same element, one might be interrupted when another one starts, and that may result on some element not being redrawn on screen.
For more about this see D3 documentation: Working with transitions, specifically this section which explains that "for a given element, transitions are exclusive: only one transition can be running on the element at the same time. Starting a new transition on the element stops any transition that is already running."
I have some charts/graphs that I'm using the google visualization api to display. Initially i have set the display of their container to none. Once the user clicks a button I use javascript to make the container's display property to block. I'm seeing two strange behaviors when I do this
When I do it this way, the charts display improperly( they are smaller in size which causes some of the text labels to run over each other or off the chart). However, if I don't turn the display property to none initially then they work just fine.
When the charts are messed up and I press F12 (either on ie or chrome) to open the inspector, these charts magically redraw themselves to the proper size again.
Is there a way to either fix the 1st issue or somehow use javascript to emulate the redraw that is happening when I open the inspectors?
You can try following options:
1) Change your container div's display property to '' (empty parenthesis) instead of block
OR
2) After you change the display property to block, force the window resize event.
You could use the jQuery resize() method, like this:
$(window).resize();
Drawing charts inside hidden divs causes the Visualization API's dimension detection algorithms to break, which is why your charts are messed up. The fix is to draw the charts while the divs are visible, then hide the divs after the charts have drawn. You can use "ready" event handlers for your charts to accomplish this:
google.visualization.events.addListener(chart, 'ready', function () {
document.querySelector('#myChartDiv').style.display = 'none';
});
I tried to resize the window using scripts, but I found that some browsers did not support this. In the end, I ended up removing the container div from the DOM using jQuery and then appending it again when I wanted to display it. This preserved the correct sizes of the graphs
$tab3 = $('#tab3').remove();
then when I wanted to display it (the div of class panes is the original parent to the div of id tab3)
$('.panes').append($tab3);
My GWT application consists of a "Dashboard" that has a few charts . I need to be able to hide and show charts as and when necessary.
As you can see in the jsfiddle below, i was able to hide the chart, but the invisible chart eats up mouse events(when the mouse hovers over the invisible chart the tooltips are still displayed).I need to stack another canvas on top of the chart when the chart is hidden.But since the chart is taking up the mouse events , my canvas cannot receive any. Any ideas as to how to fix this ?
http://jsfiddle.net/archerabi/vnBsx/1/
I think it's because you're only hiding the legend instead of the whole container. I changed .highcharts-legend to .highcharts-container and I think it solved that issue. See here
When my iframe's onReadyevent is fired, I draw a flot graph in it (the iframe is inside an ext component). But the graph gets drawn with the wrong spacing (labels are in the wrong place - either to far away from the axis or on the wrong row, both causing those annoying scroll bars to show up). However, the graph redraws itself correctly with the same data whenever the onWindowResize event is fired.
Could something happen AFTER the onReady event that changes the size of the iframe (making the flot graph suddenly the wrong size)? Why would the graph draw incorrectly for the onReady event and not for the onWindowResize event?
I don't think this has anything to do with flot (a JS charting library that works on jQuery) itself...
Could you use onLoad?
Are there images [set without explict width and heights] that could be loading after onReady causing the dimensions to change?