Skip to content

Tag: d3.js

Why can click not see update

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?

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.

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