Difficulty understanding D3 Angular: color fill remains unchanged

While developing an angular application with D3 JS, I encountered an issue with changing the fill color of an SVG.

Upon reviewing the code, I noticed that I created one SVG and attempted to insert another one from a vendor:

function link (scope, element, attrs) {
        var svgContainer = d3.select(element[0]).append("svg")
                                             .attr("width", $window.screenX - 2*100)
                                             .attr("id", "oil-game")
                                             .attr("height", 1200);

        var well = svgContainer.append("g");
        angular.forEach(scope.d3WellDetails, function (value, key) {
            var circle = well.append("circle")
                                     .attr("cx", 55)
                                     .attr("cy", 100 + key*115)
                                     .attr("r", 40)
                                     .attr('stroke', '#0897c7')
                                     .attr('stroke-width', '5')
                                     .attr('fill', 'white');
            well.append("text")
                .attr('x', 50)
                .attr('y', 85 + key*115)
                .attr('fill', '#0897c7')
                .attr('font-size', 16)
                .attr('font-weight', 900)
                .text(value.Name);
            well.append('svg:image')
                .attr('xlink:href', '../../images/wells.svg')
                .attr('x', 40)
                .attr('y', 95 + key*115)
                .attr("width", 30)
                .attr("height", 30)
                .attr('fill', '#0897c7');
        });
}             

My concern lies in the final part where I am appending the new SVG. When I use .attr('xlink:href', '//'), I am unable to change the fill color of the SVG.

However, if I use .attr('src', '//'), the SVG image is not visible, but I can see it as empty in the developer tools.

How can I resolve this issue?

Answer №1

The issue in this scenario isn't related to Angular, but rather to how the external SVG is being appended as an image.

Instead of appending the external SVG directly as an image, I recommend including it as an SVG Definition and using the 'use' attribute. This approach will allow you to apply styles to the imported SVG later on. It's important to note that inline styles in the definition will take precedence over styles added via JavaScript or CSS afterwards.

For reference, here's an example: https://jsfiddle.net/3fx1553f/

HTML:

<svg id="svg-defs" version="1.1" style="display:none">
  <defs>
    <g id="gdef1">
      <circle id="s1" cx="200" cy="200" r="100" stroke="black" stroke-width="3" />
    </g>
  </defs>
</svg>
<div id="container">
</div>

CSS:

.fill-red {
  fill: red;
}

JS:

var svg = d3.select('#container')
  .append('svg')
  .attr('id', 'main')
  .attr('width', '540px')
  .attr('height', '540px');

svg.append('g')
    .attr('class','fill-red')
  .append('use')
  .attr('xlink:href', '#gdef1');

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

What is the impact of memory on NodeJS performance?

Currently delving into a book on NodeJS, I stumbled upon an intriguing example: const express = require('express') const bodyParser = require('body-parser') const app = express() var tweets = [] app.listen('8000', '172 ...

Connect-Domain fails to detect errors in the scenario described below:

I have chosen to implement the connect-domain module (https://github.com/baryshev/connect-domain) in order to streamline error handling within my Express application. Although it generally functions as expected, there is a peculiar issue that arises when ...

What is the process of substituting types in typescript?

Imagine I have the following: type Person = { name: string hobbies: Array<string> } and then this: const people: Array<Person> = [{name: "rich", age: 28}] How can I add an age AND replace hobbies with a different type (Array< ...

Hide all the div elements on the web page and only display one when a button is clicked

I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load. Buttons: <button class="btn btn-outline-primar ...

Storing sound recordings with GridFS

I am currently facing an issue with the following code, it is only working partially and I require assistance in fixing it. The function saveAudioToGridFS() should return a file ID to its calling function. Despite verifying that the value to be returned ...

byte sequence displays as binary data (angular + express)

I've been working on pulling files from a back-end Node.js / Express server and displaying them in an Angular front-end. Despite trying different methods, I keep facing the same issue - the data displayed at the front-end appears as a bytestring. Even ...

The checkbox filter in Angular 6 has the ability to replace the previously selected

I've been working on creating a filter system using checkboxes. Below is a snippet of the code I'm currently using: filter.pipe.ts import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'filter2' }) ...

Executing secure journey within TypeScript

Just came across an enlightening article on Medium by Gidi Meir Morris titled Utilizing ES6's Proxy for secure Object property access. The concept is intriguing and I decided to implement it in my Typescript project for handling optional nested object ...

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

Is there a way to have an object with an ID as a key value pair? For example: friends = { 1:{name:'John', age:25, gender:'boy'}, 2:{name:'Jessie', age:30, gender:'girl'}, 3:{name:'Johanna', ag ...

Share an entire /folder through an express server

I am currently working on an express server setup, and I am looking to streamline my route handling for managing an entire directory structure. root /html /css /js /app.js /images /index.html /some-other.htm ...

Looking for a dynamic solution to retrieve over 100 data products in Angular JS? Let's explore methods to efficiently call a large volume of

Just starting out with Angular JS and working on creating a searchable product list gallery using Angular JS. Currently, all my product data is in the same js file which I know isn't the best solution. I would like to make it dynamic by connecting to ...

Having trouble setting the select value with JavaScript in the Selenium web driver

I am working on a web page that includes a cascaded dropdown feature. The data in the second dropdown appears to be generated via ajax based on the selection made in the first dropdown. Here is the code for the first select option: <select class="form- ...

Angular JS has a unique feature of a scrollable drop-up menu that allows

https://i.sstatic.net/MOUqO.pngHere is the code snippet for my Dropup component: <div class="dropup"> <button class="btn btn-primary btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false> ...

Implement Material UI Card Component in your React Project

I'm currently working on a project that includes a page with expandable cards arranged in a list format. The code I have right now is not very scalable, as I keep adding individual card tags for each item. What I would like to achieve is to load data ...

How to Exclude ress.css in Vuetify.js

How can I prevent ress.css from conflicting with Bootstrap and my custom styles in Vuetify? I attempted to remove it from the Vuetify directory within node_modules, but that did not resolve the issue. ...

Every time I try to launch NPM start, an error pops up on my screen

Whenever I try to execute the command: npm start An error message pops up saying: npm ERR! missing script: start This is what my package.json file looks like: { "name": "react-app", "version": "0.1.0", "private": true, "dependencies": { " ...

"Modify marker icon upon click event in Google Maps by utilizing the loadGeoJson function

I have successfully loaded the markers from a json file using loadGeoJson. While I am able to SET the marker icon/img on load, I am unsure of how to CHANGE it upon click. Is there a way to target the clicked marker and perform a setIcon or similar action ...

Utilizing Angular's File Upload feature with Glyphicon icons

Has anyone tried to open a local file using bootstrap glyphicon? I found this example at https://jsfiddle.net/JeJenny/ZG9re/, but it doesn't seem to work. Does anyone have any ideas on how to make this approach work with images like glyphicon? main.h ...

Tips for effectively training my Neural Network

I am currently working on training a neural network to determine directional decisions based on its inputted life level. The neural network is designed to take in three inputs: [x, y, life]. If life => 0.2, it should output the angle from [x, y] to (1, ...

NextJS function utilizes its own references within React and automatically fetches data without the need for an import

I recently purchased this template and I'm trying to figure out which page the code snippet "{getLayout(<Component {...pageProps} />)}" is directed to during the initial load. It seems like it might be a global variable hidden somewher ...