Category : d3.js

I am trying to implement a d3-example in Angular I am facing a problem when trying to replace values in the data object. (I use Angular v12.0.4 and d3 v7.0.0 according to package.json) Here is my data.csv: year,population 1950,2525149312 1951,2571867515 1952,2617940399 1953,2664029010 And here the function for replacing the strings with Number and Date-objects: let ..

Read more

.on(‘mouseover’, d => { this.tooltip.transition().duration(200); this.tooltip .html( <div class="tooltip-outer"> <div class="countryname">${d.properties.label ? d.properties.label : d.properties.name}</div> <div class="countrypop">${d.properties.description ? d.properties.description : ”}</div> </div> ) .style(‘left’, d3.event.pageX + 10 + ‘px’) .style(‘top’, d3.event.pageY – 35 + ‘px’) .style(‘opacity’, 1); }) not able to cover ${d.properties.description ? d.properties.description : ”} & ${d.properties.description ? d.properties.description : ”} statement from ..

Read more

I am currently working on d3 zoomable sunburst graph with the help of https://observablehq.com/@d3/zoomable-sunburst this example . I have managed to draw it on angular but I need to make the data labels horizontal and not inclined in an angle. Can anyone help me in doing that? Thanks Source: Angular..

Read more

I am trying to mock ScaleTime<…> hybrid type interface from d3.js. It goes like this: export interface ScaleTime<Range, Output, Unknown = never> { (value: Date | NumberValue): Output | Unknown; invert(value: NumberValue): Date; // … } I can create a spy object for the methods: const scaleTimeSpy = jasmine.createSpyObj(‘ScaleTime’, [‘invert’ /*…*/]); scaleTimeSpy.ticks.and.returnValue([date1, date2]); And I ..

Read more

Consider the following component export class SvgGraphComponent { public svgData$: Observable<ISomeType> constructor(private svgGraphService: SvgGraphService) { this.svgData$ = this.svgGraphService.getData(); this.svgData$.pipe( // adding takeUntil here // delay(0) ) } private drawSvg(svgData: ISomeType) { const element: HTMLElement = (d3.select(‘#svgChart’).node() as HTMLElement); if (!element) { return; } // drawing here } } The template is the following <div id="svgChart" ..

Read more