News Articles D3.js

D3 Sunburst – How to map custom color to path

I’m currently building a D3 Sunburst Vue component and I’m using the npm package vue-d3-sunburst for that. The documentation for the package can be found here: https://www.npmjs.com/package/vue-d3-sunburst The documentation says there is a get-category-for-color function which is used to map an item and its color like this: (nodeD3: Object) => category: Number | String By […]

Use React+D3 in Express

I am trying to use D3 in a React component within an Express app. It seems like it should be a rather easy task, but following various tutorials not targeted to an Express app did not work: in the example below, I get an empty svg (<!DOCTYPE html><div><p>D3 Example</p><svg></svg></div>) without the red circle. A possible […]

mouseover not working as an arrow function?

I have the function below: .on("mouseover", function(d, i) { d3.select(this) .attr("fill", "red"); }) However, I wanted to try writing it as an arrow function, so I found that this tutorial and got this: .on("mouseover", (d, i, nodes) => { d3.select(nodes[i]) .attr("fill", "red"); }) However, whenever I try running it, I keep getting an error that […]

Adding two javascript visuals to html page

I’m trying to add two d3 visuals to my index.html page, but only one of the visuals displays at a time. The two visuals use the same code and the only difference is the data used. They work well individually, but I am unable to get them to appear on the same page together. var […]

d3js: Force Layout on World Map recalculate on zoom

I have a world map with circles on it. With d3.forceSimulation the overlapping circles dont collide and form a bubble. The problem happens on zoom. If i zoom into the map the circles stay at the original position instead forming a new bubble or stay at the exact location. How can I do that? I […]

D3 Links and Surrounding nodes uneffected by drag

The links between nodes are neither moving nor having any effect on the nodes around them… What am I missing?? The links are created by looping over nodes and placing one in source, one in target. The lines themselves are appended within their own in the class "lines", nodes in "nodes". The reason for removing […]

Why are elements not rendered in the order listed in the markup?

I am learning D3. Here I have a set of charts and a button to control it. In the HTML – the button appears before all the charts. However, on the page – the first chart appears above the button. There is no other CSS applied to them. I would expect the button to show […]

How to add background, and border as svg images to a rect element

I have the following code which draws a rect element on the svg box with blue background and pink boarder. I would like to change the blue background with an .svg image and the pink boarder with another .svg image. //how to put the border around the SVG element var borderRect = document.createElementNS(‘http://www.w3.org/2000/svg’,’rect’); borderRect.setAttribute("id", "bRect"); […]

d3 Version acting as if it’s a higher version?

I’ve been working on a project that used d3 v5.5.0, moved it to another computer, and when I did npm install it now acts as if it’s a higher version of d3? Part of my program relies on the old way of d3 calling transform for zoom, and worked when it was that version. Yet […]

D3.JS Click Event problem, using a svg map

Hi I’m fairly new to the D3 library, and I cannot figure out how to get a click event to work when I’m clicking on the country, I understand the ‘d’ variable contains the country information but how do I get it to console log on click. I’ve tried a few methods but cant figure […]

d3.hierarchy is drawing unexisting nodes with d3.linkHorizontal()

I’m always scared to ask D3 question just because of the sheer amount of explanation needed. So, please apologies for the length in advance. Goal & Problem I’m trying to draw a hierarchical tree (tidy) diagram. The issue I’m running into is that my code draws all the nodes, even the ones that in theory […]

[D3]Why does it affect other node groups when I press the mouse on one node?

https://codesandbox.io/s/ancient-tdd-k3nu7?file=/src/index.js In this case, when mousedown on test1, it will also cause the node of test4 to be attracted to it. Is there a way to prevent the target nodes from tracking their source node (both of test1 and test4)? enter image description here Source: JavaSript – Stack Overflow

d3 – how to add x-axis labels for only years on a monthly chart?

I’m creating a bar chart in d3 (using r2d3 in R) that shows data per month. I’m wondering how I can format the x-axis so that while there is a bar for each month, the labels only show the year markers (i.e. under each january bar.) Data look like this: letter,frequency 1/1/2017,144 2/1/2017,85 3/1/2017,59 4/1/2017,73 […]

Change from using d3 event to proper handling of transform for zoom

So I had implemented event from "d3-selection" in my React app a while back, and had this function called _zoomed() to handle zoom, _zoomed = () => { const transform = event.transform; d3SelectAll(`#${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`).attr("transform", transform); this.setState({ transform }); // only send zoom change events if the zoom has changed (_zoomed() also gets called when panning) if […]

D3 Event.transform deprecated?

So I had implemented event from "d3-selection" in my React app a while back, and had this function called _zoomed() to handle zoom, _zoomed = () => { const transform = 0;//event.transform; d3SelectAll(`#${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`).attr("transform", transform); this.setState({ transform }); // only send zoom change events if the zoom has changed (_zoomed() also gets called when panning) if […]

Updating data using D3.js and creating new graphical elements only works when the array of data is shortened

I have an update() function that runs initially and displays all the data by creating some circles using the distance, angle, and colour. The initial data is an array of objects. The structure is shown below. [ { Category: {string} SubCategory: {string} Technology: {string} Distance: {string | int} 0 – 100 Angle: {string | int} […]

d3 in node and in browser – How to import?

I simply can’t understand what the best way is to import and use all the functionality of d3 in node and in the browser. This certainly has to do with my limited understanding of the differences of require. import and importing d3 in a script-tag. When should I use what? Should I, for example when […]

How to make a custom donut chart in d3?

I currently need to create a chart as shown. My Approach Right now I followed the boilerplate code and created 3 donut charts inside 3 components. I plan to color each donut chart depending on my data maybe using a hook/prop change. With this approach I have the following output: In this way I cannot […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.