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,347
questions
1
vote
0
answers
24
views
D3 Issue with custom link strength on update
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<style>
svg {
border: 1px black solid;
}
</style&...
1
vote
1
answer
11
views
Issues with Event Handlers D3.js Update Function
I’m experiencing an issue where the mouseover event isn’t working after integrating the update function into my D3.js code. It seems the event listeners are not being recognized or triggered as ...
- 11
1
vote
1
answer
22
views
Using d3.js to submit multiple JSON requests and bind data to different elements
I am building a configuration page that allows a user to reconcile unmatched data by selecting a match from a list of possibilities. The list of items needing to be matched is generated by the backend,...
2
votes
0
answers
50
views
Trouble with correctly triangulating a polygon on a sphere in THREE.js
tldr: help I can't correctly triangulate a GeoJSON polygon in 3D space to make it spherical and it has been haunting me for weeks. The question at the end of this novel is "Is this a poly2tri ...
- 41
0
votes
1
answer
66
views
How to install the D3 library
I have an issue with the methods in the D3 library. I am a fairly new to JS and my background is more in Python and Java. I am currently just testing out to make some visuals on a webpage and for some ...
0
votes
0
answers
19
views
How to sort and align the nodes vertically in the graph using d3.js and angular 13
I have used the d3.js graph structure to draw the flow chart. I have managed to align each node vertically at each level. However, I am facing several issues:
I am unable to sort the nodes based on ...
- 13
1
vote
1
answer
30
views
Limit chart bottom labels to 7
I'm working on a D3 line chart that requires bottom labels to be 7, but the chart has more data than 7 and want to limit it.
Here is a work-in-progress jsfiddle:
jsfiddle.net/JosephMurphy/au2y7pLs/16/...
- 75
0
votes
0
answers
43
views
D3 scaleTime getting really strange dates
I am working on a timeline in d3. My expectations are that it shows the day of today, and then the user can zoom in/out to see more times and dates. However to start with it gets me a date in 2034 and ...
- 449
0
votes
0
answers
23
views
Plotting (discontinuous) 2d-functions correctly with d3
I have to have a smooth plot of a decisionboundary which is a function that takes (x,y) as input and returns a single value. The decisionboundary points that I have to plot have to be smaller than a ...
0
votes
1
answer
15
views
Creating Real-Time Quantum Entangled Visualizations with D3.js
I am attempting to create real-time quantum entangled visualizations using D3.js. This involves simulating quantum states and visualizing their entanglement dynamically.
I've been exploring quantum ...
0
votes
0
answers
18
views
Draw edges with changing edge width between two nodes
I would like to represent edges that convey the strength of some parameters between two edges for visual representation, preferably using python/vis.js/d3.js. While I could use edge labels, given the ...
- 1,102
1
vote
0
answers
17
views
How do I make the data points follow the cursor in this interactive scatter plot graph?
I want to create an interactive scatter plot graph with the x-axis ranging from 24 to 48 and the y-axis ranging from 10,000 to 100,000. The points should be able to be moved by the user by dragging ...
- 17
0
votes
0
answers
24
views
React - Recharts How to prevent active bar to change while still hovering on the tooltip
I am using this chart, the problem is my tooltip contains some links, and it's width extends the other bars, and when i want to click on the link, the tooltip changes to the next bar's tooltip.
Is ...
- 83
1
vote
1
answer
23
views
Unable to create a bar chart in powerbi using d3.js
I'm trying to create a bar chart for a sample data in the d3.js editor in powerbi, but I'm always getting a blank visual or else just a visual with only 2 lines as x and y axes. Below is the code I've ...
- 19
0
votes
0
answers
19
views
React d3 tree display div on hover
I am rendering custom nodes in react-d3-tree. I want to display a div on hover only next to the hovered node. How can I proceed with this?
Each time I hover over a node, all the divs display, not only ...
- 33
1
vote
1
answer
42
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
31
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 ...
- 19
0
votes
0
answers
65
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
43
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
18
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
55
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 ...
- 19
0
votes
1
answer
23
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,461
0
votes
1
answer
53
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
35
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
51
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
32
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
35
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....
- 353
1
vote
0
answers
37
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