Questions tagged [d3.js]
D3.js is a JavaScript library for creating interactive data-bound visualisations of documents using HTML, SVG, and Canvas. Questions should mention the version number of D3 you are using.
d3.js
39,346
questions
1
vote
1
answer
33
views
React onMouseEnter event.currentTarget is always null
I am using React d3 tree with a custom node element. I am trying to show some text on hovering a node, but it only works the first time I hover over one, then the mouse.currentTarget seems to be null ...
- 33
0
votes
0
answers
20
views
Multi line and axes chart using d3.js in powerbi
I'm trying to create a multi line chart with dual y axes , I've tried running the code in powerbi d3.js visual , but is not yielding any visual. I'm not understanding where I've made the mistake
I ...
- 15
0
votes
0
answers
62
views
How to set 'path' to use it with .getTotalLength() .getPointAtLength() methods?
I try to get 'path' to make use of it with .getTotalLength() .getPointAtLength() methods.
I try the following out of not knowing well enough SVG stuff:
// Declare the line generator.
const line = d3
...
- 1
0
votes
1
answer
35
views
How to obviate incompatibility of d3.js versions?
If I use d3@7 I have nice labeling but no circle with toltip moves along the line as it supposed by code. A piece of circle is available in the upper left corner.
If I use d3@6 I have absurd labeling ...
- 1
0
votes
0
answers
18
views
D3 zoom transform retained in subsequent charts
This relates to D3 version 7 and an issue with the zoom transform values being retained in subsequent charts on the same page. I have researched anything I could find online or here but none answers ...
- 59
0
votes
0
answers
17
views
More than three d3 Charts on HTML Page is not showing
As shown in the picture, the fourth chart is a line chart.enter image description here The code itself works fine individually and with other codes. It shows when it is the first chart, the second ...
1
vote
0
answers
50
views
Create line chart using d3.js
I want to create a line chart for the following data in powerbi custom visual d3.js
Student name
Marks
Jasmine
45
Oliver
33
Maya
11
Ethan
66
Sophia
77
Lucas
8
Ava
88
Clara
11
I've tried ...
- 15
0
votes
1
answer
21
views
D3 zoom prevents 'mousedown' event from bubbling
I'm working on an application that requires the use of d3.zoom, and I'm bumping into an issue when listening for the mousedown event. I've simplified the problem into the example below.
Basically, I ...
- 1,451
0
votes
1
answer
50
views
SVG Gradient with D3
I am trying to achieve the following svg gradient
The closest I can achieve is
I'd be very grateful if someone could help out
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3....
- 1,861
0
votes
1
answer
33
views
Converting Seaborn into D3 Plot
I would like to create this plot in D3.js v7.
To do so, I wrote the following script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
...
- 92
1
vote
1
answer
49
views
Why doesn't d3 like this GeoJSON file?
Does anyone have any idea why D3 is failing to render the following GeoJSON?
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="960" height="720"></svg>
&...
- 12.8k
0
votes
0
answers
22
views
Trouble with laying two SVG Treemaps on one page. (with D3.js)
Trouble with laying two D3 treemaps on one page.
Hello,
I am new to D3.js and SVG and I had trouble laying two SVG Treemaps on one page.
I got a hint from this.
text
What I want to do is lay two ...
- 1
0
votes
2
answers
27
views
Vue 2.15.3 Node 18.18.0 d3-org-chart require() of ES Module
I am using Nuxt 2 with Vue version 2.15.3 and my Node version is 18.18.0, npm 9.8.1
"nuxt": "^2.15.3",
"d3-org-chart": "^3.1.1",
After npm install d3-org-chart,...
- 654
0
votes
1
answer
33
views
D3 Chart Doesn't work when using viewbox in Angular Project
My SVG just will not show up in my dom when I change it to try and use a viewbox.
I am just realistically just changing this:
.attr("width", this.width + this.margin.left + this....
- 343
1
vote
0
answers
35
views
How to avoid slow down over long period in infinite animations of CSS?
I have this CSS code below that triggers animation in a path of a D3 graph.The code likes below
.link {
stroke-dasharray: 4;
stroke-dashoffset: 40;
animation: dash 20s linear infinite;
}
@...
- 2,969