Skip to main content

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
Filter by
Sorted by
Tagged with
0 votes
0 answers
22 views

SVG rounds edges with large stroke-width

I met a problem during sankey diagram generating with d3 and screenshoting it with html2canvas. D3 looks fine with this code of links: <svg id="svg" width="740" height="400"> <g fill="...
Romanoti's user avatar
  • 1,267
0 votes
0 answers
6 views

How make own d3.arc function?

I try make own d3.arc function but can't count arc's large-arc-flag and sweep-flag. createArc (bands) { const innerRadius = this.maxRadius * 0.8 const outerRadius = this.maxRadius * 0.95 ...
Stanislav Kim's user avatar
0 votes
0 answers
5 views

How to calculate the center of pie slice with pie chart created with D3?

I created a pie chart with D3. I want to calculate the center of each pie slice, so I can draw a line/path from the center of each pie slice. At the end of the line, it'll have text. Code Playground I ...
Jojo Ceasar's user avatar
1 vote
0 answers
29 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&...
thenickman100's user avatar
1 vote
1 answer
15 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 ...
user21392216's user avatar
1 vote
1 answer
23 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,...
Carl Peterson's user avatar
2 votes
0 answers
54 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 ...
kishetate's user avatar
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 ...
Jordan Dickson's user avatar
0 votes
0 answers
20 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 ...
prasanna t's user avatar
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/...
JosephMurphy's user avatar
0 votes
0 answers
44 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 ...
Fabiot's user avatar
  • 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 ...
MarcelausZell's user avatar
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 ...
Zeeshan Majeed's user avatar
0 votes
0 answers
19 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 ...
Quiescent's user avatar
  • 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 ...
Victor's user avatar
  • 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 ...
Anir_Ln's user avatar
  • 83
1 vote
1 answer
25 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 ...
Elysian's user avatar
  • 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 ...
bogdmu00's user avatar
1 vote
1 answer
43 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 ...
bogdmu00's user avatar
0 votes
0 answers
32 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 ...
Elysian's user avatar
  • 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 ...
Igor's user avatar
  • 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 ...
Igor's user avatar
  • 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 ...
Chris E's user avatar
  • 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 ...
Huiwen Chen's user avatar
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 ...
Elysian's user avatar
  • 19
0 votes
1 answer
24 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 ...
Eric's user avatar
  • 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....
Stu's user avatar
  • 1,861
0 votes
1 answer
36 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"> ...
dsapprentice's user avatar
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> &...
jbeard4's user avatar
  • 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 ...
LucasLim's user avatar
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,...
Kumari Shalini's user avatar
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....
nuccio's user avatar
  • 353
1 vote
0 answers
38 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; } @...
Souvik Ray's user avatar
  • 2,969
0 votes
0 answers
61 views

Is there a way to support ESM and node/NPM without an import map?

I'm working on a library that I publish as ESM. A primary goal is to allow it to be used without a build step, or even without using node/npm at all (just clone the repo and import). But I also ...
anderspitman's user avatar
  • 10.2k
0 votes
1 answer
58 views

Bipartite_D3 giving "ReferenceError: vizjs is not defined" error and not runnin script properly

I am new to programing, but I figured how to do most things on R Studio with the help of some frineds and try and error. But I have no idea what is happening when I try to run the Bipartite_D3 package,...
Diego M Matielo's user avatar
0 votes
0 answers
20 views

Unable to view an indented tree and a document embedding for this d3 project

I am learning visualization using D3 and was trying to execute this code on my browser for creating an indented tree to view taxonomy and to create a document embedding but unfortunately I can't view ...
bad_with_usernames's user avatar
0 votes
1 answer
45 views

Why the mouse hover is not showing?

// Create a tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "...
YUZHANG CHIA's user avatar
0 votes
0 answers
37 views

Why are x, y in a twin d3v7 force graph NaN? Why doesn't the data work properly?

I want to implement a dual-panel set of D3 force graphs (see below). I use an adjacency list to split my original data into two graphs. There are two copies of everything, so individual elements can ...
modeller's user avatar
1 vote
1 answer
41 views

create d3 heatmap showing days on one axis and hours on the other?

I want to create a heatmap with d3 showing days (January 1, January 2, etc.) on one axis, and hours (12am, 1am, 2am, etc.) on the other. I have managed to get the data to display, but I'm not sure if ...
sprucegoose's user avatar
0 votes
0 answers
20 views

How to Align KDE Plots to the Edges of a Scatterplot in React with TypeScript and D3.js

I am working on creating a component that includes scatterplots for multiple datasets and KDE (Kernel Density Estimation) plots for the x and y-coordinates of those datasets, in React with TypeScript ...
Meetali's user avatar
1 vote
1 answer
57 views

Directed graph update nodes with new data

I've been struggling with this issue for days now and cannot find a solution to update the nodes properly. Since I'm using threejs to render the graph I couldn't find enough info on the web on how to ...
iacobalin's user avatar
  • 553
0 votes
1 answer
67 views

Javascript Error: require is not defined is the Jupyter Notebook Macbook Pro OS

I'm encountering a JavaScript error, "require is not defined", when trying to run Jupyter Notebook on a MacBook Pro. This issue occurs in both Edge and Chrome browsers. Below is the ...
Kum_R's user avatar
  • 368
0 votes
0 answers
28 views

d3.js how to keep focus on node, when collapsing and expanding

There is a dynamic hierarchy tree written by myself with d3.js library. When collapsing and expanding the nodes, the distance between the nodes is dynamically recalculated and the focus is shifted. ...
agentx's user avatar
  • 9
0 votes
2 answers
89 views

How to filter Observable Plot text mark when "section" is too narrow

Using Observable Plot, I wish to recreate the https://merrysky.net weather timeline with colored bands and text labels. I have gotten an initial version working, but it has some flaws: The labels are ...
Leftium's user avatar
  • 17.5k
0 votes
0 answers
18 views

Sorting tiles by total (sum) size of parent node in a D3.js treemap

I generated the treemap below using the D3.js library. Parent nodes are filled in gray, leaves are filled white. However, despite setting the sorting based on the values (determined by attribute &...
ricardo3889's user avatar
0 votes
0 answers
19 views

d3js graph: no overlapping nodes

I have a graph in d3js which is very dense in the centre, but not dense in the outer areas. Currently, it looks like this: My primary goal is that no nodes are overlapping and that the titles of the ...
Hemmelig's user avatar
  • 794
-1 votes
1 answer
37 views

Transform NCDU JSON output file to hierarchical json data like flare.json [d3 example file]

I want to convert the NCDU json file (https://dev.yorhel.nl/ncdu/jsonfmt) to a hierarchical json that can be imported in D3.js using D3.json(). Here is the D3 sample file flare.json (https://raw....
ricardo3889's user avatar
0 votes
0 answers
44 views

Angular 14 - D3 Package running an unintended animation on a node which was not clicked

I'm new to D3 package. I'm currently working on a network topology visualization a using D3 on Angular 14 project. The network topology structure is described below: L0: 0001 L1: 0002 L1: 0003 L2: ...
Welly 林經緯's user avatar
0 votes
0 answers
23 views

D3 Projection has black border, causes country fills to be impossible

I am currently trying to setup a D3 Map with PIXI. For some reason, when using d3.geoMercator with data from https://www.geoboundaries.org/. I get this border around my map: When having all my ...
Finlay Metcalfe's user avatar
0 votes
0 answers
14 views

How to set the minimal height of the rectangles in D3's zoomable icicle

In my React app I would like to add this kind of zoomable icicle and use my own data for it: https://observablehq.com/@d3/zoomable-icicle The problem I came across was that some of my data was having ...
Adriana Ružić's user avatar

1
2 3 4 5
787