New answers tagged d3.js
0
votes
d3: How to properly chain transitions on different selections
I'm a fool for contradicting @mbostock over his own library, but I think as of D3 version 7, the explicit delay method is the only option for sequential transitions involving different selections.
...
- 4,091
1
vote
Jest Unexpected token 'export' when using d3
You can add this to the jest.config. The answer is from the jest GitHub issue #14911:
// jest.config.js
module.exports = {
moduleNameMapper: {
'^d3-(.+)$': '<rootDir>/node_modules/d3-...
- 11
0
votes
Issues with Event Handlers D3.js Update Function
I believe this is because you are setting the handlers on the transition (.transition() changes the chained variable to the transition and not the selection). Switch it to:
u.enter().append("...
- 108k
0
votes
Accepted
Using d3.js to submit multiple JSON requests and bind data to different elements
The function you pass to d3.json is executed async. By the time it is called, the variable obj has been over-written by a subsequent execution of the loop. The easiest fix is to wrap d3.json in an ...
- 108k
0
votes
How to install the D3 library
You have most probably renamed the original d3.v7.js file to d3.v7.mjs to be able to import it from barChart.mjs. Unfortunately, this is not as simple: you can't use a non-module as a module, ...
- 6,663
1
vote
Accepted
Limit chart bottom labels to 7
In D3.js, the ticks() function is used to specify the approximate number of ticks to be drawn on an axis.
If you only want to limit the number of ticks, use tickValues instead of ticks.
const ...
- 8,083
0
votes
Unable to create a bar chart in powerbi using d3.js
I've solved the issue. In my case , the columns which we took are having capital letter.But when I checked in the Pbi object of the d3.js editor it was taking the column names in small caps, So when ...
- 19
0
votes
Accepted
Creating Real-Time Quantum Entangled Visualizations with D3.js
advanced graphics techniques such as WebGL for accelerated rendering or SVG for scalable vector graphics can enhance performance and responsiveness in rendering complex quantum states. These ...
- 16
0
votes
How to get a non-minified version of d3.js
A non-minified version is downloadable here:
https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.js
0
votes
Accepted
React onMouseEnter event.currentTarget is always null
Solved by changing onMouseEnter handler to below. Seems this prevents currentTarget to be null from what I understand, if I am wrong correct me.
onMouseEnter={(event) => {
const { ...
- 33
0
votes
How to obviate incompatibility of d3.js versions?
A couple issues:
1 - d3.pointer(this) is no longer valid. this used to represent the event, now the event is passed as an argument to the mousemove callback:
function mousemove(event) {
const x0 =...
- 108k
0
votes
Recharts/Chart js - Can I create radial stacked bar chart?
This type of chart goes by other names as well- wind, wind rose, rose, nightingale charts, to name few. In paid, look at AG charts. For free, I got it done with Ant design charts. It is weirdly ...
- 67
0
votes
Customize the d3 month or year tick format
I was able to use the below snippet. My 'date' values were passed as
mm/dd/yyyy, e.g. '06/01/2024', so I converted to a JS date object first.
d3.axisBottom(x).tickFormat(
date => {
date ...
- 439
1
vote
SVG Gradient with D3
There is no conic-gradient in SVG, so you need to construct the gradient from more linear gradients. Here, I use stroke-dasharray to create four different circle slices, each with it's own gradient.
...
- 11.6k
1
vote
How to fill area under `recharts` `AreaChart` curve, when data has +ve and -ve values
To anyone coming into this issue recently (2024):
Just add baseValue props to Area component and wala it works like magic!
<Area dataKey="value" baseValue="dataMin" />
...
- 11
2
votes
Accepted
D3 zoom prevents 'mousedown' event from bubbling
You can use event capturing, it's part of the event lifecycle and it starts before the bubbling up. It's like propagation but the other way around.
Learn more: https://www.geeksforgeeks.org/phases-of-...
- 18.1k
2
votes
Accepted
Converting Seaborn into D3 Plot
As Yogi mentions in the comments, seaborn and d3 are using different binning thresholds for the histogram. To me the seaborn ones are odd as they do not fall on nice round increments (see edits ...
- 108k
1
vote
Why doesn't d3 like this GeoJSON file?
Multiple edits later: Your GeoDataJSON is correct as it specifies the coordinates in order:
longitude
latitude
In short: If you reverse the coordinate order you can see the expected result.
//...
- 15k
0
votes
Vue 2.15.3 Node 18.18.0 d3-org-chart require() of ES Module
You can transpile d3 related packages in nuxt config:
// nuxt.config.js
export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: [/^d3-/, 'internmap'],
...
- 1,624
-1
votes
Vue 2.15.3 Node 18.18.0 d3-org-chart require() of ES Module
When you try to import a CommonJS module with the import syntax, JavaScript will consider the file to be an ES module and try to process it as an ES Module. This can cause errors at runtime because ...
- 27
0
votes
D3 Chart Doesn't work when using viewbox in Angular Project
I was able to answer my own question because of the comment user Mark left and his demo. Much appreciated Mark.
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation, ...
- 353
Top 50 recent answers are included