1. Home

Donut chart d3.js labels

I’m new to d3.js and I’m trying to change this code. What I actually need is to have each slice’s name on it. The problem is that labels need to change for each button. For example, if you click on culture/Media the labels are – German, English, History but for medicine are – Dentist, Pharmacist… donut chart any help is highly appreciated 🙂 Answer I’ve refactored your code a bit, since you kept doing the same thing a lot. Look at the update function for that. You also didn’t account for more/fewer slices depending on the selection, so I added

Why can’t I access my JavaScript array by index outside of the d3 then function?

The ultimate goal is to create a d3 stacked diverging bar chart. The votesData object is created successfully from the data, but I can only access the data within the d3 then function even though the array is created outside of it? Code: The first set of logs return the array and the first object as expected but the second set of logs (outside the d3 then) return the votesData object, but when trying to access the first index of the object it returns “undefined”. Why? And how would I iterate through that object outside of the d3 then function?

How to incorporate D3 svg elements into mithril.js?

I have been working with a framework using mithril.js and wish to add this script that draws an interactive tree into a component on my website. So far, I just placed the JS code inside the script tags into my application, and I know that normally, the DOM object generated is obtained by calling svg.node(). But I know I can’t return that from my object’s view method, and instead need to return something of the form m(…). I tried looking at sources like this one but couldn’t find a solution to my problem in them. Is there a known way

D3 Stacked Bar Chart: Bars Overlap

I’m building an interactive bar chart with D3 (version 4). Users may choose a single category (this works fine as coded below) or they can view all categories, in which case the color-coded bars should be stacked. The issue is that I’m not sure how to manipulate the y-coordinates so that each bar is placed above another when the user has chosen All Categories. Right now they overlap because they all start from y:0. Here’s what it looks like (each stack would add up to +/- 200 to ~280 if not overlapped): And here’s my function for displaying the chart:

React + D3: Data over Y AXIS in scatter plot not appear correctly

I’m newbie with D3 and I trying to create a Scatterplot graphic. When I try to create the points in the graphics this don’t appear correctly. I’ve got 9 points to put in the scatterplot but only appears 5. And all of these are not located correctly in their positions. For example, we’ve got one in (0, 0) and is over the x = 0 correctly but the position in the y axis is not 0 is almost 2. The data of all points are: And the code where I draw the points is: How is that possible? What am

How do I space out and wrap SVG text elements by individual word with d3.js?

I have the following array of words and colors: Using d3.js, I want to: (1) space these words evenly along an x-axis; and (2) wrap the words accordingly to a given width (move words to the next line). I started a jsfiddle here, but the words for now all share x and y coordinates. I’d like it to appear as a sentence. Answer Added the below code that will use foriegnObject to append data like we do in HTML. Now with little manipulations, i am adding span tag with the required color attribute.

d3 line generator returning null rather than path data string

I’m using d3 v4 to create a line graph. My pathGenerator, using d3’s line() method, is returning null instead of a path data string (eg “M 100 100 L 300 100 L 200 300 z”), and therefore no lines are being drawn. When I add in console.log()s to try to determine where the issue occurs, the passed in datum appears correctly as an object with percentLoad and efficiency keys with valid numbers as their values. Console.log()s within the .x() and .y() methods do not seem to be invoked, but I’m not sure why this would be. Answer d3.line generator expects

Create a scale for bands with different width in D3.js

We have projects, which are assigned to different teams. Now I have to create project timelines. For the purposes of this question I have created a dummy in jsfiddle.net. https://jsfiddle.net/cezar77/6u1waqso/2 The “dummy” data look like this: The time is displayed on the x axis and there is a horizontal bar for every project stretching from the start_date to the end_date. On the left side, on the y axis, I’d like to display the teams (see the labels on the left side in the jsfiddle) and create a gridline for each team, separating the groups of projects. Because each team has

d3 run animations inside function in order

I am trying to run animations in order. Here is an example. So i want to create a function like this so i can run them in the order rect1(), rect2(), highlightRect() one after another (after each animation ends). I have tried something like this but it gets messy when there are more animations. Might be an ignorant question can this be done with promises? Thanks Answer Promisifying these would actually be pretty easy: First we’ll make the functions return the object we’re chaining on. Then we can use a generic higher order function to promisify those for us. Then