score:3
i was having trouble using elementref, i'm not sure if that api has changed. so i ended up using viewcontainref to get the nativeelement.
import {component, viewcontainerref, oninit} from '@angular/core';
declare var d3:any;
@component({
selector: 'line-chart',
directives: [],
template: `<div class="sh-chart">chart</div>`
})
export class linechart implements oninit{
elem ;
constructor(private viewcontainerref:viewcontainerref) {}
ngoninit(){
this.elem = this.viewcontainerref.element.nativeelement;
d3.select(this.elem).select("div").style("background-color", "yellow");
};
}
score:4
npm install --save d3
check d3 version in package.json and check it in node_modules too.
then, in the component.ts, import it as below
import * as d3 from 'd3';
score:6
try this:
npm install d3@3.5.36 --save
to set the version you need
npm install @types/d3@3.5.36 --save
or a higher version if you want d3 4+
and then in your ts
do
import * as d3 from 'd3';
should work just fine
score:58
to use renderer, you need the raw html element (aka nativeelement). so basically you have to use whatever your library is, get the raw element and pass it to renderer.
for example
// h3[0][0] contains the raw element
var h3 = d3.select(this.el.nativeelement).select('h3');
this.renderer.setelementstyle(h3[0][0], 'background-color', 'blue');
the warning about elementref is about using it directly. that means that this is discouraged
elementref.nativeelement.style.backgroundcolor = 'blue';
but this is fine
renderer.setelementstyle(elementref.nativeelement, 'background-color', 'blue');
for showing purposes you can use it as well with jquery
// h2[0] contains the raw element
var h2 = jquery(this.el.nativeelement).find('h2');
this.renderer.setelementstyle(h2[0], 'background-color', 'blue');
my recommendation though is to stick to use what angular2 provides you to do this easily without depending on another libraries.
with pure angular2 you have two easy ways
- using directives
// this directive would style all the h3 elements inside mycomp
@directive({
selector : 'h3',
host : {
'[style.background-color]' : "'blue'"
}
})
class h3 {}
@component({
selector : 'my-comp',
template : '<h3>some text</h3>',
directives : [h3]
})
class mycomp {}
- using viewchild with local variables
@component({
selector : 'my-comp',
template : '<h3 #myh3>some text</h3>',
})
class mycomp {
@viewchild('myh3') myh3;
ngafterviewinit() {
this.renderer.setelementstyle(this.myh3.nativeelement, 'background-color', 'blue');
}
}
here's a plnkr with all the cases i mentioned in this answer. your requirements may differ, of course, but try to use angular2 whenever you can.
Source: stackoverflow.com
Related Query
- Using D3.js with Angular 2
- Uncaught TypeError: (void 0) is not a function using d3 with angular 7
- Using Angular ng-class with d3.js on svg element
- Using d3 Timeline with Angular
- Using D3.js + click events with Angular 6
- Angular NVD3 Multibar Chart with dual y-axis to showup only line using json data
- injecting the d3.js graphs correctly when using Angular directive multiple times with bootstrap
- How to draw a multi line series graph using d3.js with json data using angular directives
- Display specific data in a td with multiple Arrays using Angular
- Rotate rectangle with 4 points using Angular
- d3 with using angular drag and drop directive
- How to draw line with arrow using d3.js
- Using arrow functions with d3
- How do I resolve "[ERR_REQUIRE_ESM]: Must use import to load ES Module" when using D3.js 7.0.0 with Next.js 11.0.1?
- D3 with Backbone / D3 with Angular / D3 with Ember?
- Using $filter in Angular directive
- How to use 'this' in Angular with D3?
- Using d3.js with Apache Zeppelin
- Using D3 transition method with data for scatter plot
- Graph with auto layout using d3 (a tree with multiple parent nodes)
- Using D3 with Elm
- Using d3-3d with pan & zoom while retaining rotation
- Make simple bar chart using C3 with separate columns on the x axis
- D3 fill shape with image using pattern
- D3 using classed() to add and remove class with checkbox
- Using d3.js svg clipPath not clipping in Angular
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- Using D3 with a multi-dimensional array/object
- Using AngularJS / AngularUI with d3.js and DOM effects
- Using server-sent events with cubism.js graphs
More Query from same tag
- geoChoroplethChart map that displays cities / points of interest with tags
- d3.map() function not returning expected results
- D3 Line chart with ordinal scale issue
- Not able to center D3 pie chart
- responsive canvas on window resize event
- d3.select('rect id').attr('y') returns Cannot read property 'getAttribute' of null
- Error: <rect> attribute width: Expected length, "NaN". and <text> attribute dx: Expected length, "NaN"
- D3.js - what is selection.call() returning?
- Delete and add nodes with click on a node in d3.js
- Using Vue.js 3 component dynamically in the D3.js v7
- tooltip using d3-tip not showing
- Multi dynamics d3 charts on a same page
- Input caret stops blinking in Chrome when d3 animation applied
- D3 to CSS color for stacked bar graph
- Programmatically Zooming in D3?
- D3 force directed graph, apply force to a "g" element
- How do I place my self-made triangle on a specific location with my ordinal scale in D3?
- How to get target element in drag n drop d3 v4?
- d3 Version acting as if it's a higher version?
- Uploading JSON data to WordPress WPD3
- Obtaining totals from properties of parallel arrays in nested objects
- How to remove spaces between bars in grouped bar charts in d3
- d3.js dynamic data reload possibly related to exit().remove()
- NVD3 - Adding and resizing multiple vertical lines to stacked area chart
- What is the difference between D3 and jQuery?
- How to open json file with objects in d3?
- How to zoom only on the X axis in a line chart in d3.js (v7)
- Update position/transition from last value (guage chart / d3.js)
- d3.js: distance point to svg:path
- Making a d3 chart reactive (v5)