Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

I've utilized d3 to create a map. Its width is dynamically set based on the parent div's (with the id "map") width, and its height is calculated with a ratio of 5/9 in relation to the width. The viewBox attribute has been defined as "0 0 width height".

Below is the code snippet for the setup:

var width = $("#map").width(),
    height = width * 500 / 900,
    active = d3.select(null);

var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2, height / 2]);

path = d3.geo.path()
    .projection(projection);

svg = d3.select("#map").append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", "0 0 " + width + " " + height)

g = svg.append("g");

This is how it appears in Chrome:

However, this is the appearance in IE:

The scaling appears distorted. I suspect it's related to the viewBox setting. Can anyone provide guidance on resolving this issue?

Thank you!

javascriptjquerycsssvgd3.js

Answer №1

Your issue arises from the fact that Chrome and IE interpret height: "100%" differently. You've cleverly linked your height to your width and aspect ratio, but in order to make this work effectively, you must use these values when determining the dimensions of your svg as well as the viewBox:

var svg = d3.select("#map").append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("viewBox", "0 0 " + width + " " + height);

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

npm ERROR: Unable to install the package named "<packageName>" because it conflicts with an existing package of the same name

Currently, I am attempting to incorporate the jsonfile package into my project. However, I am encountering a couple of errors: An issue arises when attempting to install a package with the same name as another package within the same directory. (Despite ...

javascriptnode.jsnpm

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

AngularJS JSON data computation

As I delve into learning angularjs (not 2), one of the challenges I face is calculating the total amount for a customer order. The data I'm working with is structured as follows: var clients = [ { id: 1, jo ...

javascriptangularjsjson

Tips on aligning two divs vertically within an HTML <li> element, even with content that varies in size, by utilizing nested flexboxes

Every div contains unique content of varying heights. Our approach involves using flexboxes to ensure equal height for each li element. Now, we are facing a challenge with positioning the div class="2" so that their tops align perfectly. We've expe ...

htmlcssflexbox

Troubleshooting material design CSS problem in AngularJS routing module

Attempting to incorporate material design with routing in angular js, but encountering issues with CSS design not working. Interestingly, when using bootstrap CSS, it functions properly. Check out the Plnker Demo here However, upon trying this approach, ...

cssangularjsangularjs-routingangular-material

issue with react prop causing my function to function in one scenario but fail in another

I'm a bit confused with these two functions. Although they seem identical to me, only the first one is able to generate images from this.state.images. Any guidance on this seemingly small mistake would be much appreciated. The following code snippet ...

javascriptreactjscomponentsstateprop

Retrieving a specific attribute pair from a JSON object

Currently, I am trying to retrieve the temperature data and display it on my webpage. Since these are objects with no specific order, I am struggling to understand how to access them without using an index. { "response": { "version": "0.1", "termsofServic ...

javascriptphpjqueryjsonobject

What is the best way to access the id attribute of a <td> element within a <tr> using jQuery?

Can someone assist me with this issue? Is there a way to get the ID of the first or second td element instead of using a loop? Here is an example: "<tr class='test_point' id="+fileName+"><td><img src='"+ROOT_PATH+"/assets/d ...

javascriptjquery

Trigger an alert message upon loading the HTML page with search text

I need to search for specific text on a webpage and receive an alert if the text is found. <script type='text/javascript'> window.onload = function() { if ((document.documentElement.textContent || document.documentElement.innerText ...

javascriptjqueryhtml

AngularJS interprets expressions in the 'action' attribute

This afternoon I encountered a rather peculiar behavior with AngularJS. If "//" is present in an expression within the "action" attribute of a form, Angular will throw an interpolate error. Take a look at the code snippet below. When you run this code, t ...

javascriptangularjs

The CSS property that controls the background color of an element

This syntax for a CSS background property is quite effective: .my-element { background: linear-gradient(rgba(131,131,131,0.8), rgba(98,98,98,0.8)), url('img/background.jpg') } However, I am not looking for a gr ...

cssbackground

Do I require two bot logins for discord.js?

Working on my discord bot, I've been trying to incorporate a script from index.js. Should I also include bot.login at the end of cmdFunctions.js? Here is the content of index.js: const Discord = require('discord.js'); const bot = new Discor ...

javascriptnode.jsdiscorddiscord.js

Is it possible for issues to arise when serving a web app using the "Globals" module in the Mean Stack?

Looking to transfer a variable (a constructed filename) from one file to another within an API can be quite challenging. One solution that comes to mind is utilizing globals, but with my current code structure, it seems like the only viable option. To addr ...

javascriptnode.jswebmean-stackmeanjs

Is it possible to retrieve the image height using jQuery before it is displayed on the webpage?

I am currently working on loading approximately 50 images from JSON data that is returned from PHP. In order to avoid making an additional call to PHP to get the image size, I would like to handle this on the client side. Is it possible to do so? Below is ...

phpjquery

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

Encase all jQuery functionalities within a custom class

I am looking to create a JavaScript class that encapsulates jQuery's DOM functions, but I want these functions to only interact with a single property of that class. class Foo { constructor() { this.$wrapper = $('<div>wrapper</div ...

javascriptjquery

When examining passwords, Bcrypt returns false

In my application, I am utilizing the Promise interface along with bcrypt. Despite using the same password for comparison, I am receiving a false result. const bcrypt = require('bcrypt'); const saltRounds = 10; const password = 'secret&ap ...

javascriptnode.jsbcrypt

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve this ...

htmlcssheight

Inject a snippet of temporary code at the end of the CSS file using JavaScript or JQuery

I am looking to dynamically add temporary CSS code to the end of an external CSS file or modify it using JavaScript or jQuery. For example, let's say my mystyle.css file looks like this: //mystyle.css p{color:red} Now, when a user interacts with the ...

javascriptjquerycss

Enhancing the aesthetic appeal of a form

I have created a form in HTML that utilizes JavaScript to pull data from a database. I am looking to style the form, but I'm unsure of how to proceed. Below is the form along with some CSS code. How can I integrate the two together? <form id=" ...

javascripthtmlcss