Arrange two svg elements in a horizontal line

Using two SVG elements on one screen in d3.js has been a success for me. The code I have looks like this:

<svg width="880" height="800" id="svg1"></svg>  
<svg width="880" height="800" id="svg2"></svg>

var svg1 = d3.select("#svg1");

var svg2 = d3.select("#svg2");

However, my current issue is that svg2 appears below svg1 instead of side by side. My aim is to have them positioned next to each other. Does anyone know how to resolve this problem? I attempted to adjust the x position of svg2 with the following code:

<svg cx="880" cy"100" width="880" height="800" id="svg2"></svg>

Unfortunately, this approach did not provide the desired solution. Any suggestions are greatly appreciated. Thank you!

javascripthtmlcssd3.jssvg

Answer №1

By default, the svg> element in HTML is displayed as inline, allowing them to appear side by side without any additional styling.

To demonstrate this concept, here is a brief example:

var svg = d3.select("body")
  .selectAll("feynman")
  .data([0,1])
  .enter()
  .append("svg")
  .attr("width", 100)
  .attr("height", 100)
  .style("background-color", function(d){ 
    return d? "blue" : "orange";
  });
<script src="https://d3js.org/d3.v4.min.js"></script>

The challenge arises when the width of each SVG is 880px, requiring a window width of at least 1780px to display them next to each other.

Alternatively, you can place both SVGs inside a <div> with a width greater than 1760px (as suggested by LeBeau in this answer), which will generate a scroll bar:

<div style="width:1770px">
  <svg width="880" height="160" id="svg1" style="background-color:blue"></svg>
  <svg width="880" height="160" id="svg2" style="background-color:orange">></svg>
</div>

You can also experiment with overflow and overflow-x properties for further customization.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Designing a customized CloudWatch Dashboard Widget with a select input element in HTML

I am currently setting up a CloudWatch Dashboard feature that involves calling a lambda function and passing an AWS region name as a parameter. I have been attempting to implement a plain old pulldown menu for users to select the region, but have struggled ...

pythonhtmlaws-lambdaamazon-cloudwatch

The vue-msal encountered issues resolving endpoints. Please verify your network connection and try again. Additional information: function toArrayString() { [native code] }

Error: Unable to resolve endpoints. Please verify your network connection and try again. Details: function toString() { [native code] } at ClientAuthError.AuthError [as constructor] (webpack-internal:///./node_modules/msal/lib-es6/error/AuthError.js:26 ...

javascriptvue.jsmsal.js

Issue: Unable to locate file 'socket.io-client/dist/socket.io.min.js'

Attempting to set up the Spika backend (node application), I ran into an issue while trying to start the server in standalone mode with the command: $ node src/server/main.js The error that popped up was: Error: Cannot find module 'socket.io-clien ...

javascriptnpm

The issue of border-radius and shadow box inconsistency

I'm trying to style a div with the following properties: .example { margin: 200px; width: 200px; height: 200px; border-radius: 20px; box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0px 0pt 11pt; } <div class="example"> </div> ...

htmlcss

What is the best way to achieve maximum height?

Currently, I am attempting to obtain the total height of the page in order to apply it to the styles, specifically for the darkMask class. The reason for needing this height is that when a certain action is triggered within the header, a dark overlay is a ...

javascriptreactjsnext.jsserver-side-rendering

Is there a way to verify if an item is currently present in a three.js scene and subsequently update it?

I am currently facing an issue with checking if an object is already present in a three.js scene and then replacing it. It seems to be more of a scope problem rather than a specific three.js issue. My scenario involves a form that pops up upon clicking, a ...

javascriptthree.js

The $routeProvider is unable to load the view specified in ngRoute

I am currently in the process of implementing ngRoute into my application, but I am facing challenges with getting it to function properly. To showcase my efforts, I have developed a basic app. index.html: <!DOCTYPE html> <html ng-app="tester"& ...

javascriptangularjsngrouteangularjs-ng-route

Are you looking to analyze inputs and tally up any duplicates?

I am working on a form that requires users to input up to 20 1-4 character codes. My goal is to count each code entered and present the output in the following format: AB //entered once EFOO //entered once AACC x 2 //because AACC was entered twice into fo ...

phphtml

Having trouble with Ajax Cross Domain functionality?

Similar Question: Ajax cross domain call Using the following code... var URLs = new Array(); var titulo = new Array(); $.ajax({ url: 'http://www.example.com.br', type: 'GET', success: functio ...

javascripthtmlajax

Establishing a predefined value for a GET parameter within the URL

I manage a multi-language website with my own implementation of the language system: Users can select their preferred language by clicking on the flag icon in the header. When a user selects a language, they are redirected from https://example.com to https ...

javascriptphp

"Troubleshooting Bootstrap nav-pills' failure to update displayed content

I'm currently working on creating a dynamic navbar that updates the content based on which navigation pill is selected. For some reason, the content in my div.tab-content isn't changing as expected... Here is an example of the code I am using: ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

What is the method for calculating the days between the current date and a chosen date utilizing a datepicker in Angular?

Is there a way to calculate the number of days between today's date and a selected date from a calendar picker? COMPONENT.HTML file `<mat-form-field appearance="fill" class="example-form-field"> <mat-label>Choose a d ...

htmlangulartypescriptangular-material

After making a request to the server, I am getting a blank object when trying to

To retrieve data from the server, I use this code snippet: app.get('/emails', function(req, res) { var taskArray = []; db.collection('emails').find({}).toArray(function(err,docs){ docs.forEach(function(doc) { /*console ...

javascriptnode.jspromise

Preventing long int types from being stored as strings in IndexedDB

The behavior of IndexedDB is causing some unexpected results. When attempting to store a long integer number, it is being stored as a string. This can cause issues with indexing and sorting the data. For instance: const data: { id: string, dateCreated ...

javascripttypescriptindexeddb

Is there a JavaScript alternative to wget for downloading files from a specified url?

"wget http://www.example.com/file.doc" can be used to download the file to the local disk. Is there an equivalent way to achieve this in JavaScript? For example, let's look at the following HTML snippet. <html> <head> <script langu ...

javascriptdownloadwget

How can I implement an if-else statement using CSS in Python Selenium?

I am attempting to create an if else statement that checks for the existence of a specific CSS element. If the first CSS element does not exist, it should then click on the second CSS element. Here is my current code: #IF STATEMENT driver.find ...

cssseleniumselenium-webdrivercss-selectors

Using images in R Shiny with htmlTemplate: A step-by-step guide

In my current project, I have a file named template.html that I am loading using the code snippet below: https://i.sstatic.net/TipvS.png One issue I'm facing is including an image in this template.html file. Despite having the correct relative path ...

htmlrshiny

CSS failing to accurately calculate width when children have percentage values assigned

This CSS quirk is quite interesting... An inline-block container will correctly calculate width when using units like px, vw, em, etc. But it behaves differently when using a percentage-based measurement. Percentage Example: https://i.sstatic.net/saI0M.j ...

htmlcss

Different approaches to transforming jQuery code into functional AngularJS code

I am a beginner in AngularJS and I'm looking to implement functionality for a login page similar to the one you see when you click the 'Forgot Password' link: Would it be more appropriate to use a directive instead of a controller for this ...

javascriptjqueryangularjscontrollerdirective

Layering one canvas on top of another

Here is the code I am working with. With a JavaScript library, I can draw on the first canvas and then merge it onto the second canvas. My question is, how can I make the first canvas stay in place or float, regardless of where I scroll on the second canv ...

csshtmlcanvas