I am building a d3js based javascript frontpage. Whilst restructuring some code from functional to OOP the click method stopped being able to find the update method. I get Uncaught ReferenceError: this.update is not defined. I think its something to do with scope but im quite new to js so its hard for em to figure it out, any ideas?
Tag: d3.js
Javascript: sort Array of objects by external map (or external K.V pairs)
Pretty novice JavaScript user here. I questions of this type seem to be quite common, I promise I looked around for a while, although I may have missed something. I am trying to sort an array of objects by values in a separate datastructure (map or object of k,v pairs) Data to sort with (this is the result of Object.fromEntries(d3.rollup(
Horizontal Bar Chart — unexpected offsetting of y-axis
I am trying to make a horizontal stacked bar chart, starting with this code snippet, updating to d3 v7. Instead of getting a neatly stacked bar chart, each subsequent bar in a stack is getting offset vertically down from where it should be. When I inspect the yScale value, I get the expected value, so I’m extra-confused about this behavior.
D3 element not showing up in DOM
I’m using this Observable post to create a calendar heatmap with D3.js. My problem is that the calendar is not appearing once it has been created. I have a demo set up on StackBlitz that is set up as suggested in the blog post. I’m not sure if I missed something in the post or if something isn’t set up
Update D3v7 chord layout
Recently I am trying to understand D3 Chord graphs, especially with the D3v7. I got two different datasets and want to dynamically update those sets. In general it works beside two problems: The first object in each datasets will be ignored. I do not why as any console.log shows the existing data but it is simply not drawn. For example
D3 text in alignment with rect
I have rect and a description text above chart – Issue is description text is not getting properly aligned with rects. Description is getting mixed into rects. I want to start text after rect ends. I have below code – HTML getting generated for color rect and description text – How can I avoid mixing of color rect and description
Unable to update nodes position using d3 force and Svelte
I’m trying to create a simple network using D3 force and Svelte. The network position should depend on the container dimensions computed using bind:clientWidth and bind:clientHeight. I mean that if the network container has width=200, height=300, then the network center should be x=100, y=150. The code that creates the graph is this: It’s very simple: width and height are props.
How to set pattern origin at the top left point of each bar of a barchart in d3.js?
I created a barchart and used patterns to fill it. For each pattern, I set x=0 and y=0, but I don’t know where this (0,0) point is, so I don’t know my pattern start tiling from where . I want to set the top left corner of bar as the origin point of pattern for each bar. How can I
Transitioning Two Sets of Elements doesn’t work
I am trying to create a stacked bar graph. I want to add some nice transitions to my graph, but I am getting an error. Where if I try to transition both rectangles, only the blue rectangles transition in and appear. When I call: Only the blue bars transition in and appear, but the red bars never appear, even when
How to filter a barchart by a “thrid” value using d3.js
I was able to plot a very simple barchart using D3.js version 7 that relates names with points from a dataset. In this same dataset there’s a third value that I would like to use to filter the barchart. I can filter it by name or points already simply using: But if I try to filter the barchart data by