56188

d3.js two graphs on same page is on top of each other

Question:

I have 2 graphs each in separate angular directive

<chart1 ng-model="data" style="display:block;" id="plot1" class="ng-pristine ng-valid"> <svg width="960" height="500" style="right: 0px;">Some data</svg> </chart1> <chart2 ng-model="data" style="display:block;" id="plot1" class="ng-pristine ng-valid"> <svg width="960" height="500" style="right: 0px;">Some data</svg> </chart2>

chart1 generation of svg:

var svg = d3.select("#plot1").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom).style({'right': '0'});

chart 2 :

var svg = d3.select("#plot2").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom).style({'right': '0'});

for some reason those two graphs ends on top of each other, in html i can see that svg is stylled as position: absolute. if i remove this style everything works, but it i sstyle this way for a reason probably...

i come accross this guid: <a href="http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html" rel="nofollow">http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html</a>

but it didnt helped.

How can i solve this problem?

Answer1:

I notice that both of your chart tags are using the same id id="plot1".

I'm not much of an expert on these things, but I'm fairly sure that id's should be unique.

From <a href="http://www.w3schools.com/tags/att_global_id.asp" rel="nofollow">w3school</a>: "<em>The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).</em>"

Answer2:

You might also need to use two different variables var svg1 and var svg2 in your scripts, because you know, the async functions will have trouble to find the correct svg element.

<hr />

<strong>Story:</strong>

Google search took me here for having trouble to place two SVGs on a single DOM. Just check if this is your case.

The problem I faced:

<ul><li>I had two chart elements on the same page; the ids, names were different.</li> <li>Both of them were at different portion of page, (generated using a template engine[GSP])</li> <li>Both the blocks had a similar script. The content was loaded from JSON API.</li> <li><em>The chart contents were overlapped</em></li> </ul>

The actual problem:

<ul><li>The variable names were messed up. Both the scripts used same variable var svg=... to refer to SVG element. The JSON response in async function from server was going to second SVG because its script reassigned var svg=...</li> </ul>

The solution:

I used two different variables: var svg1=... and var svg2=...

Recommend

  • Add a div to replace Video after Video Plays Through
  • overlapping appointments using the entity framework
  • How can a flex item keep the same dimensions when it is forced to a new row?
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • Multiple flexboxes with margin-right, except the last one in the row? Without JS?
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Function JavaScript : on Menu CSS HTML
  • How can I add div content to a new page in jspdf?
  • Caret disappears when the background of a textbox is gray in wpf
  • Making header act like google chrome mobile app address bar
  • cell spacing in div table
  • hibernate sets dirty flag (and issues update) even though client did not change value
  • Floated image with variable width and heading with background image
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Blackberry - Custom EditField Cursor
  • With Hadoop, can I create a tasktracker on a machine that isn't running a datanode?
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Body moving without any force applied? (Box2d)
  • Regex thinks I'm nesting, but I'm not
  • What is the “return” in scheme?
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Controls, properties, events and timers running in design time
  • How to check if every primary key value is being referenced as foreign key in another table
  • ILMerge & Keep Assembly Name
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • Android Studio and gradle
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • python regex in pyparsing
  • Android Google Maps API OnLocationChanged only called once
  • JaxB to read class hierarchy