Exploring the art of path zooming in d3.js

Trying to resolve this issue, I adjusted the geoJsonURL to handle a more intricate shape. Despite the new shape allowing the zoom method to function correctly, the shape itself appears completely distorted. Based on the Coordinate system: WGS 84 (EPSG:4326) and insights from this discussion on Stack Overflow, it should resemble what I currently have in order to calculate the correct projection. However, the output is still presenting an odd path.

Any assistance would be greatly appreciated, Thank you in advance.

The original topic is below with the new part added above

I attempted to zoom in on the path, but the scale method did not seem to have any effect. I also tried using the pointRadius method as suggested in some discussions, but that didn't help either. As you can see, the path is nearly centered (manually translated), yet very small. What am I missing with my approach?

I have access to the coordinate system and box coordinates (not included in this example) if necessary. Despite going through various examples, nothing seems to work. Any ideas on what could be going wrong? Coordinate system: WGS 84 (EPSG:4326)

Thank you in advance

/* geometryType=esriGeometryPolyline OR esriGeometryMultipoint OR esriGeometryPolygon OR esriGeometryEnvelope*/
const geoJsonURL = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&where=(LOWER(NOME)%20LIKE%20LOWER(%27%25Alhadas%25%27))&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"

const canvas = d3.select("#map").append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .style("border", "2px solid red");

const projection = d3.geoTransverseMercator()
  .rotate([8.1331, 0])
  .center([0, 39.6682])
  .scale(200)
  .translate([300, 350]);

const path = d3.geoPath().projection(projection);

const group = canvas.append("g")

d3.json(geoJsonURL).then(function (data) {
  group.selectAll("g")
    .data(data.features)
    .enter()
    .append("path")
    .attr("stroke", "blue")
    .attr("stroke-width", 1)
    .attr("fill", "none")
    .attr("d", path);
  //.attr("d", path.pointRadius(20));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
    <div id="map"></div>
</body>

javascriptd3.js

Answer №1

After conducting extensive research and reading various sources, I have discovered that my geographical coordinates are already in a 2D coordinate system as discussed in this informative thread on Stack Overflow: Scaling d3 v4 map to fit SVG (or at all). The d3.geoMercator method essentially converts 3D geometries into a 2D plane, which explains why applying this method did not yield the desired results for me.

Below is how my code currently appears:

const queryRegionText = "where=NOME LIKE '%25Alhadas%25'"
const geoJsonURL2 = "https://sig.cm-figfoz.pt/arcgis/rest/services/Internet/MunisigWeb_DadosContexto/MapServer/2/query?f=geojson&" + queryRegionText + "&returnGeometry=true&geometryType=esriGeometryPolyline&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=3763"

const width = 500;
const height = 500;

const canvas = d3.select("#map").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("border", "2px solid red");

d3.json(geoJsonURL2).then(function (data) {

  var projection = d3.geoIdentity()
    .fitSize([width, height], data);

  const path = d3.geoPath().projection(projection);

  const group = canvas.append("g")

  group.selectAll("g")
    .data(data.features)
    .enter()
    .append("path")
    .attr("stroke", "black")
    .attr("stroke-width", 1)
    .attr("fill", "gray")
    .attr("d", path);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<body>
    <div id="map"></div>
</body>

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

Continuous dragging with HammerJS (dragging even after releasing)

Is it possible to implement dragging after release using HammerJS (and if so, how)? I am using it in conjunction with AngularJS, but that detail should not be relevant. I'm inquiring about this because I aim to achieve a seamless scrolling experience ...

javascriptangularjshammer.js

Manipulating cursor position in React's contentEditable

I created a simple component class ContentEditable extends React.Component { constructor(props) { super(props); this.handleInput = this.handleInput.bind(this); } handleInput(event) { let html = event.target.innerHTML; if (this.props. ...

javascriptreactjs

The Express middleware is not being utilized

There seems to be an issue with the middleware in the code below that is supposed to create a property req.user if req.session.user exists. Unfortunately, it appears that the middleware is not being triggered, causing 'hihihhiihi' to not be print ...

javascriptnode.jsmongodbexpresssession

Obtaining a value from an input field in Vue.js

Just starting out with Vue and could use a hand extracting a value from an input field: Here's what I have in my form: <input type="hidden" id="groupId" value="1"> If I were using jQuery, I would do the following: ...

javascriptvue.js

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlig ...

javascripthtmlcssangular

The ESLint rule "eqeqeq" configuration is deemed incorrect

After successfully running eslint with the provided .eslintrc file, I encountered an issue when making a simple change to use 'standard' instead of 'airbnb-base' as the extend: module.exports = { root: true, parser: 'babel-esl ...

javascriptnpmeslint

Encountered a JQuery error in the application: trying to call the 'open' method on dialog before initialization is complete

I am having trouble integrating a dialog box into my application and encountering the error mentioned above. Here is the jQuery code I'm using: $( "#dialog" ).dialog({ autoOpen: false, width: 450, modal: true, ...

javascripthtmljquery

Retrieve the JSON response from the server and store it in variables using jQuery's AJAX function with the `done

I am trying to retrieve a JSON response from the server upon clicking a button and then parse it into a div. However, I am struggling with how to accomplish this. <button type="submit" id="btPay" name="btPay"> Go for Pay ...

javascripthtmljqueryajax

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

I am trying to enhance this image slider in HTML and CSS to achieve the following objectives: 1. Eliminate the scroll bar 2. Implement swipe functionality with mouse flick (should work on mobile devices as well) 3. Make the images clickable .slider{ ove ...

javascripthtmlcss

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

javascripthtmlcssreactjstypescript

Tips for retrieving the MenuItem name upon click event using Menu and MenuItem components in Material UI React

Utilizing MaterialUI's Menu and MenuItem components in a React project, I am looking to display the name of the menu item upon clicking on it. Upon inspecting event.currentTarget in console.log, it returns the entire list item: ListItem Image attache ...

javascriptreactjs

Using the Unsigned Right Shift Operator in PHP (Similar to Java/JavaScript's >>> Operator)

Before marking this as a duplicate, please take a moment to read the information below and review my code * my updated code! The issue I am facing is that I need to implement Java/JavaScript '>>>' (Unsigned Right Shift / Zero-fill Rig ...

javascriptjavaphpbit-manipulationbit-shift

I'm confused, I installed the module but it's still showing an error message saying it can

I've been working on coding a discord music bot, and here is the code I have so far: const config = require('config.json') const Discord = require('discord.js'); const ffmpeg = require('ffmpeg-extra') const client = new ...

javascriptnode.jsnpmffmpeg

Having trouble encoding PHP array in jQuery

I am struggling to find the index in a JSON array. The browser is displaying undefined data. I have posted the code snippets below. Here is my PHP encoded array: [{"voo_Cod":"1","voo_CidadeOrigem":"1","voo_CidadeDestino":"2","voo_Data":"2015-07-13 07:00: ...

javascriptphpjqueryjson

The compare function in bcryptjs will result in a false output if the passwords include numerical

I have successfully used bcryptjs to hash my passwords during user registration. However, I am facing an issue with the bcrypt.compare function when attempting to log in. The function returns a false promise when passwords contain numbers or special charac ...

javascriptnode.jsexpressauthenticationbcrypt

What is the most efficient approach to completing everyday tasks directly in a Vuex store?

Currently, I am working on making API calls from within a Vuex store action object. Here's an example of one of my actions: /** * Check an account activation token * */ [CHECK_ACTIVATION_TOKEN] ({commit}, payload) { Api.checkActivationToken(payl ...

javascriptapivue.jsvuex

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Hello and thank you for taking the time to read my query! I am currently working in a Vue file, specifically in the App.vue where I am importing an external .js file containing icons. Here is how I import the script: let recaptchaScript2 = document.creat ...

javascriptvue.jsvuejs2vue-component

Triggering of NVD3 Angular Directive callback occurring prematurely

Lately, I've delved into utilizing NVD3's impressive angular directives for crafting D3 charts. They certainly have a sleek design. However, I'm encountering numerous challenges with callbacks. While callbacks function smoothly when incorpor ...

javascriptangularjsd3.jscallbacknvd3.js

Ways to split a string using jQuery

I am working with a jQuery string array that contains the following elements: ["$1#Structure$2#Accounting$3Acc#$1Programming"] My task is to split the strings after the '#' symbol and provide the following result: ["Structure","Accounting","Ac ...

javascriptjquerystring

Demonstration of using .queue() and .dequeue() in relation to $.queue() and $.dequeue()

I successfully completed an animation using animate(), queue(), and dequeue(). However, I recently discovered that jQuery also offers jquery.queue() or $.queue() and jquery.dequeue() or $.dequeue(). Can anyone assist me in understanding these new terms w ...

javascriptjqueryqueue