After following a tutorial on creating a d3.js radar chart from http://bl.ocks.org/nbremer/21746a9668ffdf6d8242, I attempted to customize it by adding images to the labels. However, I encountered an issue with aligning the images properly. You can view my current code here:
The images I used are placeholders, but they highlight the problem I'm facing. If anyone has any suggestions or guidance on how to resolve this alignment issue, I would greatly appreciate it! Thank you in advance!
Remember to incorporate the half size of the image into both the x and y coordinates.
axis.append("svg:image")
.attr("class", "legend")
.style("font-size", "11px")
.attr("text-anchor", "middle") //
.attr("xlink:href", "http://dummyimage.com/60x60/000/ffffff.png")
.attr("x", function (d, i) { return -30+rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice * i - Math.PI / 2); })
.attr("y", function (d, i) { return -30+rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice * i - Math.PI / 2); })
.attr("width", 60)
.attr("height", 60);
Within Nadieh Bremer's coding structure, this is the method she employs for aligning the labels:
.attr("x", function (d, i) {
return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice * i - Math.PI / 2); })
.attr("y", function (d, i) {
return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice * i - Math.PI / 2); })
When dealing with text-only labels, positioning them in the center can be achieved easily using:
.attr("text-anchor", "middle")
However, when it comes to images, there isn't a direct text-anchor equivalent. In the case of an image, the x and y coordinates point to the top-left corner. As seen in the provided screenshot, all small squares have their top-left corners right at the center:
https://i.sstatic.net/CmZbE.png
To properly position the images, we need to shift them upwards and towards the left until the centers are aligned with where the top left corners were initially set. Since all images share the legend class (each being 60x60 pixels), this adjustment can be made by:
d3.selectAll(".legend").attr("transform", "translate(-30,-30)");
An alternative approach would be to preset the correct values for x and y as detailed in ego2dot0's response.
I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...
In my ReactJS project, I have created a component called Menu1item: class Menu1item extends React.Component{ render(){ return ( <div> {this.props.glyph}{this.props.value} </div> ) ...
Trying to iterate through a list of objects, I can't index it, but can use forEach. My issue is I need to start from the last object and go to the first, but unsure how to achieve that with the forEach function. If I used a for loop, it would be like ...
Currently, I am utilizing a JavaScript code to add annotations to a PDF document within the browser. Once I have completed adding annotations, I save the modified document on my device and then proceed to upload it using another form. However, my goal is ...
I'm new to the world of Github forking and pull requests. My goal is to fork a repository, make some changes, and test them out on a project before submitting a pull request. I've already forked the repository and made modifications, but I' ...
Having some trouble with an ajax function I developed for a small project. The issue lies in running the code inside the .done() function. This function is supposed to receive a json object from php (which I am obtaining a response via cURL), but it appear ...
Check out my jsfiddle for reference. My goal is to calculate scores based on different options selected, specifically relating to radiation types. I'm struggling with assigning a score to each type of radiation and integrating the drop-down menu selec ...
I am encountering an issue with a webservice call that I am making using jQuery's AJAX method. Despite receiving JSON data from the webservice when accessed directly through the browser, my site always triggers the error function rather than the succe ...
I currently have the following code snippet in my file: <?php foreach($clients as $client): ?> <tr class="tableContent"> <td onclick="location.href='<?php echo site_url('clients/edit/'.$client->id ) ?>&ap ...
After successfully running the server, the following appeared in my cmd prompt: System check identified no issues (0 silenced). January 21, 2020 - 17:43:42 Django version 3.0.2, using settings 'crm.settings' Starting ASGI/Channels version 2.4.0 ...
My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...
We are currently developing an enterprise web application and have brought on board an e2e test engineer to automate tests. The test engineer has requested that we assign IDs to all elements in our pages. Is there a tool or method available to automatical ...
I am currently working with xml2js to convert an XML feed into JSON format. However, I'm facing an issue where certain characters like Æ, Ø & Å are displayed as expected in the XML but appear differently after parsing. After parsing, I receive ...
How can I retrieve only the literal values of all checked checkboxes without any additional data? My current approach is: $('input:checked').map(function() { return $(this).val(); }) The result that I am getting looks like this: e.fn.init[1]0 ...
Is there a method to automatically scroll to the bottom of a div when the page is loaded? I have attempted several solutions without success. If you have any insights, please share them. Thank you! ...
Recently, I reached out to tech support for help with an issue related to Ajax not executing properly due to Access-Control-Allow-Origin problems. Fortunately, the technician was able to resolve the issue by adding a file named .htaccess with the code Head ...
I am experiencing an issue with my index.php file. Here is the code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="ajax.js"></script ...
I'm completely new to using fetch and not familiar with Ajax. Currently, I am attempting to transfer data from a JavaScript file (node.js server) to a PHP file (Apache server). The data being sent consists of 2 JSON values labeled as "a" and "b". T ...
My situation involves a plane geometry that always faces the camera using the following line of code in the update loop: plane.lookAt(camera.position); While I am utilizing OrbitControls to manipulate the camera, the plane successfully maintains its orie ...
My issue involves input elements with widths set as percentages in CSS under the common class 'display-class' For example: input.test1 { width: 60% } In JavaScript, I am attempting to wrap a div around these input fields with the same width ...