Attempting to display two separate d3 line graphs within a single Ionic2 page

I am facing an issue with including multiple similar graphs on a single page within an Ionic2 application. I am utilizing the d3-ng2-service to wrap the d3 types for Angular2. The problem arises when attempting to place two graphs in separate div elements within their respective custom elements, as the drawing fails for both instances. Selecting the first div causes the second graph to override the first one without being drawn.

Is there a smart approach to include more than one graph on a page? The examples typically assign a unique id to the outer container, which is what I'm trying to achieve as well:

// Component code omitted for brevity

The HTML structure:

<div class='graphContainer'>
</div>

The usage of the custom component in an HTML file:

<ion-header>
  <ion-navbar #dashboardNav>
    <ion-title>Dashboard</ion-title>
    <button ion-button menuToggle="favMenu" right>
        <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item *ngFor="let entry of dashboard">
    {{ entry.name }}
    <d3-test-app [id]='entry.name' [timeSeries]='entry.timeSeries' [ref]='entry.name' size='medium'></d3-test-app>
  </ion-item>
</ion-content>
angularjstypescriptd3.jsionic-frameworkionic2

Answer №1

It can be quite challenging to troubleshoot without a stack trace, but it seems like the issue is stemming from how you are selecting the element. Based on this assumption, I will provide my response.

Using ID queries is beneficial when searching for a specific element within the DOM and when you are confident that there is only one element with that particular ID. Since you are working within an Angular element, you already possess the required reference - the element itself. There is no necessity to generate dynamic ID references.

While I am not well-versed in ng2, consider exploring how to access the raw element in Angular and opt for the most suitable approach within the framework. For instance, if you decide to follow something similar to the example provided in this answer:

  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }

Please note that there are multiple ways to accomplish this task... although I cannot confirm if this is the best/correct method, the ultimate objective remains acquiring the reference.

Subsequently, select it through the D3 dsl as you are currently doing by utilizing that raw reference

 // At this point this.element.nativeElement
 // should contain the raw element reference
    if (this.d3ParentElement !== null) {
      const { d3, element } = this; // <-- for convenience use block scope variables

      const svg = d3.select(element.nativeElement).append("svg")...

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

How does the 'Route' parameter serve in the Restangular methods oneUrl() and allUrl()?

Check out the signature for the oneUrl function: oneUrl(route, url). Here's what the documentation says: oneUrl(route, url): Using this will generate a new Restangular object that points directly to a single element with the specified URL. I fin ...

angularjsrestrestangular

What steps can be taken when encountering TS errors regarding missing required fields that are in the process of being filled?

In a typical scenario, the process involves creating an empty object and populating it with the necessary data. Initially, this object does not contain any properties, which leads to TypeScript flagging an error since it lacks the required type. For insta ...

typescript

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

AngularJS and the use of template tables

I need help creating an HTML table based on a specific model. Here is what I am trying to accomplish: Student | competence 1 | | subject 1 | subject 2| | exam 1 | exam2 | avera ...

angularjshtml-table

What steps can be taken to resolve the issue "AG Grid: Grid creation unsuccessful"?

For my project, I decided to use the modular import approach for AG-Grid. This means importing only the necessary modules instead of the entire package: "@ag-grid-community/core": "31.3.2", "@ag-grid-community/react": ...

reactjstypescriptag-grid-react

Angular does not automatically load data from the database into a variable when the page loads

When the page loads, I retrieve data from a database and store it in the $scope.x variable. However, although I can see the list from my database in the network tab, it is not being loaded into the variable that I need for a dropdown list using ng-repeat ...

angularjsangular-promiseangularjs-http

Assign the value of one variable to another variable using the same keys

I'm facing a scenario where I have two arrays named array1 and array2. My goal is to transfer the values from array2 into array1 for the properties that exist in array1, while keeping the default values for any properties that are not present. One ap ...

javascriptangularjs

What is the best way to apply various styles using the ng-style directive in different scenarios?

When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results. <div ng-style=" ...

javascriptcssangularjsng-style

Angular JS and TypeScript - Issue: ng:areq Invalid Argument "Argument 'XXXXXX' is not a function, received undefined"

Encountering a specific error mentioned in the title. I organized models and controllers into distinct files saved under models and controllers folders respectively. Upon trying to establish a connection between them, I received an error stating "ng:areq ...

javascriptangularjstypescript

Steps to connect two drop-down menus and establish a starting value for both

In the scope, I have a map called $scope.graphEventsAndFields. Each object inside this map is structured like so: {'event_name': ['field1', 'field2', ...]} (where the key represents an event name and the value is an array of f ...

javascripthtmlangularjsbindingcontroller

Incorporating JSON data into link text in a D3.js tree visualization

I am currently working on modifying my code to append text to links, specifically to display country names above each link. The challenge I am facing is that the text data is nested within a JSON list, making it difficult to integrate into the links: < ...

jsond3.js

What is the alternative method for applying a CSS class in the click event in Angular 7 without relying on ng-Class or ng-Style?

Is there a way to dynamically add or remove CSS classes to HTML elements in Angular7 without relying on Ng-Style and Ng-Class directives? I'd like to achieve this functionality when clicking on the elements. Appreciate any insights you can provide. T ...

typescriptangular7

Error encountered when injecting Angular module

Currently, I am attempting to develop a sample Angular application with .Net in order to understand how to connect the two technologies. However, I have been encountering an error related to injector::modulerr that I cannot seem to resolve. Despite trying ...

javascriptangularjsdependency-injectionangularjs-routingangularjs-controller

Exploring the World of D3.js with an Interactive Example

Struggling to grasp D3, I'm having difficulty executing the circle example. http://mbostock.github.com/d3/tutorial/circle.html I aim to run the part where the circles change colors and sizes. I simply copied and pasted the example but can't fi ...

javascriptd3.js

A guide on transferring files to a PHP server using HttpClient and FormData within an Ionic framework, along with instructions on receiving files in PHP

I have an input file in mypage.html on Ionic and I want to send this file to PHP for uploading it onto the server. In mypage.page.html, I have created an input field for the file name and another input field for the file to be uploaded. <ion-header> ...

phpangularionic-frameworkfile-upload

The 'type' property within the NGRX Effect is not present in the type Observable<any[]>

I am currently in the process of upgrading my Angular app from version 6 to version 7. Additionally, I am upgrading the TypeScript version from 2.7.2 to 3.1.6. The issue I'm encountering is that TypeScript is flagging an error stating that my ngrx ef ...

angulartypescriptrxjsngrx

including identical item in the array

<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <script> var app = angul ...

javascriptangularjs

Tips for waiting for DOM to finish loading in protractor tests

When I use "browser.get(url)" to load a URL in the browser, I expect something to appear on the screen. However, my test cases are failing because the page takes some time to load and the tests run before it is fully loaded. Is there a way to wait for the ...

angularjsprotractor

Using Angular JS version 1.2.26 to implement promises within a forEach iteration

I am working on a JavaScript project where I have implemented an angular.forEach loop to iterate over image configuration objects and create Image() objects using the URLs from the config. My goal is to ensure that none of the resulting images are returne ...

javascriptangularjsimageonloadangular-promise

The attribute 'sandwiches' cannot be found within the data type 'string'

In my app, I require an object that can store strings or an array of strings with a string key. This object will serve as a dynamic configuration and the keys will be defined by the user, so I cannot specify types based on key names. That's why I&apos ...

javascripttypescript