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

Tips for resolving the error "Parsing near 'Unexpected end of JSON input while parsing...' for...'mocha':'^3.2.0','s'":

Once I've successfully set up react and react-dom, the next step is to install webpack. However, I encountered an error during this process. To troubleshoot, I decided to install babel-loader first to ensure that both npm and my internet connection a ...

javascriptnpmwebpack

What is the best way to display three unique maps simultaneously on separate views?

In this scenario, I have incorporated three separate divs and my goal is to integrate three maps into them. The javascript function that controls this process is as follows: function initialize() { var map_canvas1 = document.getElementById('map_canva ...

javascriptjquerygoogle-maps

Utilize React to iterate through a dictionary and display each entry

Essentially, I am pulling data from my API and the structure of the data is as follows: { "comments": [ { "user": "user1" "text": "this is a sample text1" }, { "user": "user2" "text": "This is a simple text2" }, } ...

javascriptjsonreactjs

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

javascripthtmlcssrazor-pages

React - Incorrect components experiencing style changes due to setTimeout

Check out the code snippet here: https://jsfiddle.net/69z2wepo/204131/ A main component displays two 'notifications' each with different disappearance timings. class Page extends React.Component { constructor(props) { super(props); t ...

javascriptreactjs

Embarking on the journey of transitioning code from server-side to client-side

Currently, I am looking to transition the code behind section of my asp.net web forms application to client-side ajax or javascript - still deciding on which route to take. The main goal for this change is to ensure that the application remains functional ...

javascriptasp.netajaxhtml

Data is not being successfully passed through Ajax

Having some issues with passing data through ajax. I've used this method multiple times before without any problems, but now it's not returning anything. Here is the javascript code: $('#contactformbtn').click(function(){ var full ...

javascriptphpajaxforms

I am having trouble with retrieving and showing Json data in a table using axios within a React component

Struggling to access JSON data using hooks to display it in the <p> tag but encountering an error - "TypeError: states.map is not a function". I attempted utilizing Array.from() to convert my JSON to an array, yet it neither displayed anything nor pr ...

javascriptreactjsreact-hooks

Fixing Timezone Issue in VueJs 3 with Axios POST Request

Having an issue with axios. In my application, I have an input field for datetime-local. When I select a date and time, the displayed time is correct (e.g., selecting 10:00 shows as 10:00), but when calling a function using axios.post, the request sends th ...

javascriptvue.jsaxiostimezone

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

javascripthtmlcss

Switch between two PHP files with a toggle feature using jQuery click event

Need help with toggling between two PHP files - cab.php and d3.php. Toggling within the same file works fine, but encountering issues when trying to toggle from one file to another. function botaod2mostraesconde() { $(".wrapd2").toggle(); $( ...

javascriptphpjqueryhtml

Exploring the functionality of the onblur HTML attribute in conjunction with JavaScript's ability to trigger a

How do the HTML attribute onblur and jQuery event .trigger("blur") interact? Will both events be executed, with JavaScript this.trigger("blur") triggering first before the HTML attribute onblur, or will only one event fire? I am using ...

javascripthtmljqueryjquery-ui

Error message: The method app.get() is invalid as it is not a

I'm having trouble using Express in a prototype function ioServer() { } module.exports = ioServer; ioServer.prototype.start = function() { var app = require('express') var http = require('http').Server(app) ...

javascriptnode.jsexpressprototype

"Exploring the features of next-auth server-side implementation in the latest version of Next.js,

Is it possible to utilize next-auth in a Next.js 14 application router to access user sessions and display page responses using SSR? If so, what steps need to be taken? ...

javascriptreactjsnext.jsnext.js13next-auth

Having trouble with selecting checkboxes in a div using jQuery? While it may work in IE and Firefox, Chrome seems to be causing issues

In my div, I have several checkboxes placed under labels for formatting purposes. There is a list of checkbox names that need to be checked upon certain actions. Here is the list: var columns= ['2','5','4'] This is the curren ...

javascriptjqueryhtmlinternet-explorergoogle-chrome

Which is the Better React Entry Point: Index.html or index.js? And where exactly can we find the Node.js

After doing some research online, I came across conflicting information regarding the entry point for a react app. One source claimed that index.html serves as the entry point, while another stated that index.js is actually the main entry point for both Re ...

javascriptreactjs

Updating class after refresh of ng-repeat in AngularJS/Javascript

I am currently using angularJs in conjunction with cordova. Within my ng-repeat loop, each item has an ng-click event that stores the value of the item in an array. Additionally, when I click on an item, it toggles a class on the corresponding div (using ...

javascriptcssangularjsarrayscordova

Unleashing the power of async/await in React: A comprehensive guide

Looking to simplify my code, I am interested in implementing async and await for the following code snippet. However, I am unsure of how to proceed. Any examples would be greatly appreciated. deletePost = (post) => { var post_id = post; try { ...

javascriptreactjs

Could a class method be accessed from outside a nested handler method in JavaScript?

I am trying to make an XMLHttpRequest to a server using JavaScript. In the handler function, I need to call a method from the surrounding class. Is there a way to achieve this? Understanding how this works in JavaScript can be confusing. I have experiment ...

javascriptajaxxmlhttprequest

Marked checkboxes and Node.js

I'm having trouble grasping the concept of using HTML checkboxes with Node.js and Express. I have a basic form in EJS and before diving deeper into the backend logic, I want to ensure that the correct values are being retrieved. Despite my efforts to ...

javascriptexpressejs