39,164 questions
0
votes
0
answers
53
views
Cannot get data bound to element using selection.select or selection.selectAll
I've been experimenting with using d3.select versus de.selectAll, and I came across some unexpected behavior. In the jsfiddle example, I'm creating div elements of class classA, and then creating a ...
- 1,685
-1
votes
1
answer
63
views
How to implement custom node-based reshaping for SVG ellipse inside a resizable reference box? Using D3.js and angular 19 [closed]
I’m working on a feature similar to Figma or Lucidchart where an ellipse (or circle) is placed inside a reference box (a square) with four corner handles for resizing.
Screen recording expectation
...
0
votes
0
answers
44
views
How to implement rotation for SVG ellipse inside a resizable reference box? Using D3.js and angular 19
Reference: screen recording link
I’m working on a feature similar to Figma or Lucidchart where an ellipse (or circle) is placed inside a reference box (a square) with four corner handles for resizing.
...
3
votes
1
answer
119
views
D3.js how to keep two xScale's domains consistent when applying a zoom transformation
I'm trying to implement a D3.js chart where I can both zoom/pan and manually rescale the axes via draggable SVG handles on the axis themselves.
After rescaling the X axis with the draggable axis ...
- 1,344
1
vote
1
answer
78
views
how to bind data to a listening rectangle in a d3 line chart
I'm working on creating a tooltip in a D3 line chart. A tutorial I was following (https://www.youtube.com/watch?v=uyPYxx-WGxc) gave me some code, but the tutorial handled data differently than I have....
- 2,936
1
vote
1
answer
43
views
d3-transition synchronization explanation
I am confused of the concept of syncing d3 transitions.
Consider this code:
const t = d3.transition()
.duration(3000)
.ease(d3.easeLinear);
let width = 500;
let mySVG1 = d3....
- 351
0
votes
2
answers
81
views
unable to get a hard-coded svg line on d3 chart
I'm trying to just get a simple line on a D3 chart without using an array of data (that will be the next step).
The x-axis is years from 2007 to 2023. The y-axis is numbers from 0.00 to 0.50.
I assume ...
- 2,936
1
vote
1
answer
49
views
unable to adjust d3 y-axis label position
I want to vertically center the y-axis label on a d3 graph. Right now, I have the label at the top of the y-axis. When I try to adjust the y or dy attributes, the label moves horizontally, not ...
- 2,936
0
votes
0
answers
56
views
How do I filter out unwanted json data above a certain value?
The offending image I have made a d3.geoOrthographic projection of a globe and have imported json data for the ovation of the northern lights which also contains data for the southern lights, the ...
0
votes
1
answer
49
views
How to append a react-icons element to d3 graph
I have a react.js web application where I display d3 graph.
Currently I can append image file (as icons) to the graph nodes in the following way:
node.append("image")
....
- 1,519
0
votes
1
answer
105
views
Updating element "A" when element "B" is clicked
Note: This question is a cross-post from the D3 GitHub Discussions page: link
I'm interested in making a matrix of 'pixels' that when one is clicked, other elements can be updated accordingly. Ideally ...
- 445
0
votes
0
answers
68
views
Separate X,Y scaling using d3.js
I have made a graph using d3 in JavaScript. The code allows the user to scale the x and y axes separately using pinch gestures within a certain degree from the desired axis. This works well.
...
- 1
3
votes
1
answer
72
views
In a diagram, relations are always deleted from last to first instead of selected
I have a basic diagram in D3.js, containing objects and relations between objects initialized in these arrays:
let objectsData = [
{ id: 1, x: 150, y: 150, type: "circle", color: "#...
0
votes
0
answers
79
views
D3 wont update chart when Inputs change values from form
const ELEMENTS = ['electric', 'fire', 'leaf', 'metal', 'rock', 'water', 'wind'];
const MORAL_TYPES = ['order'];//'chaos', 'equipoise'
const createNodes = () => {
const ...
- 373
0
votes
1
answer
44
views
D3 chart for status tracker workflow
I am trying to build a status tracker using react and d3 chart library , I am able to draw but the the connectors are not coming curved , here is my code
import React, { useState } from 'react';
...
- 1
0
votes
1
answer
91
views
D3 Stacked Bar Chart Example Mechanism Specifics
I'm currently trying to make a stacked bar chart in D3. I've found the following links with examples: https://d3js.org/d3-shape/stack#_stack , https://observablehq.com/@d3/stacked-bar-chart/2 , https:/...
0
votes
0
answers
59
views
India map rendering issue on d3 + svelte
I'm an absolute beginner when it comes to d3 + svelte and I'm trying to render a map of Indian districts in d3 in svelte framework. The json I'm accessing is from here. I'm trying to render the ...
- 3
2
votes
1
answer
65
views
Loading CSV data from Box into Javascript?
I have some regularly-updated CSV files on Box that I would like to display on a website. My plan was to create the table with html, then read the CSV file with d3 and update the contents of the table....
- 153
1
vote
1
answer
66
views
D3.js Hierarchy Tree recreates entire tree when updating
I tried to recreate the example in the page while using Typescript. The tree is created, however whenever I click to collapse/expand it the transition seems to recreate the entire tree instead of only ...
- 15
0
votes
0
answers
184
views
How to use dagre (or similar graph library) to construct only the edges given fixed node positions?
I need to draw a graph whose nodes' positions and sizes are predetermined (from an external source) and cannot be changed. It is straightforward to draw the nodes using a library like d3. The ...
- 2,002
0
votes
1
answer
62
views
Drawing with D3.js date/time not aligning to scale
I am trying something simple in D3, which is to draw a block on a time interval, but the output does not align with the right time ticks on the time axis.
Below is the code I am using, and then the ...
- 18.7k
3
votes
1
answer
252
views
Customize sankey diagram design in networkd3
I found this diagram that I like from a research paper: https://www.researchgate.net/figure/Sankey-diagram-visualization-of-the-flow-of-data-from-coding-through-to-interpretation_fig1_338907991
I ...
- 6,855
2
votes
0
answers
36
views
d3.js bar graph not showing when code runs [closed]
I’m doing a d3 bar graph in CodePen, but the d3 isn’t playing. It just shows me the title(which is from the HTML) and the rest of the screen is blank. I’ve already checked the settings and added d3 to ...
2
votes
1
answer
40
views
d3 handling data re-enter while exiting
In d3, I have an app that allows users to show and hide elements. When hiding elements, I have it animate out for a few seconds. However, during this time, the user could instead hit show again, and ...
- 5,643
1
vote
0
answers
115
views
How to localize D3 SI suffixes in Apache Superset number formatting (e.g., k, M, B → тыс., млн, млрд)?
I've been trying to localize default number formatting in Apache Superset charts, specifically the SI suffixes used in formats like .2s.
Out of the box, Superset uses D3 defaults — k, M, B — but I ...
- 11
1
vote
0
answers
43
views
D3.js interpolate coordinates between two points forming an arc instead of a straight line
My goal is simple, I want to add direction markers on a path (like so).
The code that I've implemented gives the result on the initial load.
lineCoords.forEach(coords => {
for (let i = 1; i &...
- 11
0
votes
0
answers
43
views
Problem using "this" inside an accessor function [duplicate]
I'm using the D3.js "data join" pattern to display an array of 200 numbers as a curve. I came up with the following code:
this.svg
.selectAll('line')
.data(this.buffer)
.join('line')
...
- 305
2
votes
1
answer
37
views
How can I ensure a y-scale zoom is centered on my cursor in spite of margin / padding?
I have this d3 snippet here:
https://jsfiddle.net/h8b6gq7d/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Book ...
- 305
2
votes
0
answers
112
views
Organizational chart using d3 in Angular
Angular version 16; D3 version 7.9.0; D3-org-chart version 3.1.1... I created a chart of organization. But I would want to provide the organizational chart a zoom-in and zoom-out function.
I added the ...
- 29
0
votes
0
answers
40
views
d3.js force simulation: Some edges not rendering on double-click expansion
I'm building a topology visualization using d3.js where nodes are connected by multiple edges. I implemented a feature to toggle an "expanded" state on a group of edges by double-clicking, ...
0
votes
0
answers
50
views
D3 Js tree freezes/ crashes with 4000 nodes
Im not very familiar with the d3 library, but I've been playing around with this family tree repo on react which utilizes the tree visualization and customizes it to work with family trees, and it ...
1
vote
0
answers
50
views
D3 - How to merge two paths together?
I am working with some pie charts and trying to draw an outline around two pieces of a pie. I've been able to extract the coordinates from each piece and append them to the svg.
The first set of ...
- 1,623
1
vote
1
answer
40
views
d3.js pie chart replace an existing slice with multiple subslices
I'm trying to create a pie chart using d3js. When you click on a slice, an ajax is sent to the server and retrieve the children of the slice. The children always have a value which the sum is the ...
- 196
2
votes
0
answers
54
views
How can I resolve a performance issue stemming from a User Agent Style?
I am diagnosing performance issues with my website and I have noticed a specific issue with a CSS selector that slowly matches against many elements.
Use dev tools to analyse my site's performance, &...
- 186
1
vote
1
answer
53
views
How to add a Matter.js MouseConstraint to an svg viewbox element?
I'm trying to use Matter.js for it's physics engine while using D3.js for rendering the Matter physics bodies as SVG elements.
This demo is just a box dropping onto the ground. Everything works as ...
- 63
0
votes
0
answers
40
views
D3.js Bug in the resize function
I am in the process of writing a resize function for my chart. So far everything works quite well.
However, I noticed the following bug when using the resize function.
After I have rendered the chart ...
- 123
0
votes
0
answers
77
views
How can I add a polygonally-clipped Voronoi diagram to a Leaflet map?
I have a map made with Leaflet which includes a polygonal boundary: the area enclosed by the boundary is non-convex, but simply-connected: there are no holes. Within this boundary there are various ...
- 1,414
2
votes
1
answer
214
views
Creating the layout on reactflow canva as a grouped organization chart
I am trying to visualize the organization chart of our company, but there is a part that I have difficulty with and that is grouping. Since Reactflow sells this feature for a fee, I need to develop it ...
- 372
2
votes
0
answers
43
views
Drawing a simple polygon with D3.js doesn't work
Can't find the issue why the polygon is not drawn with the following code in d3:
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm&...
0
votes
1
answer
51
views
Malformed SVG path in React-PDF renderer
I am trying to render inside a PDF an SVG that displays LaTeX. The SVG has been generated using MathJax. The issue is that the rendered PDF has the Path elements from the SVG malformed. It changes the ...
0
votes
0
answers
33
views
Flip D3 js chart to top to bottom
I am using the below code but I need the hierarchies to be top and bottom instead of left and right. Is there an easy way to change this?
I want to create a simple multiple parent and multiple ...
1
vote
1
answer
32
views
Can't Access GeoJSON Property Elements With D3 Using Mouseover - Returns Undefined
I've made a map of a number of survey sites using GeoJSON data, it all looks fine. I have also set a mouseover command that highlights the site when the mouse is over it.
However, I'm trying to create ...
- 11
0
votes
0
answers
66
views
No clues given as to why this Digraph isn't rendering in my svg
I have the following function:
export async function drawTechTree(techData, svgElement) {
let graphDef = "digraph TechTree {\n";
graphDef += 'node [style="filled", color=&...
- 11
0
votes
0
answers
48
views
d3 Many-To-Many Tree(?) with set y value
I'm relatively new to using d3 - though I'm currently trying to work with d3 v7 if that helps. What would be the best way to draw a graph like this? (With many more nodes) I'm currently planning on ...
- 139
0
votes
1
answer
169
views
How to Prevent Overlapping Labels in D3 Pie Chart with Maximum 8 Labels?
I'm working with a D3 pie chart in a React component where I have a maximum of 8 labels. However, I'm experiencing overlapping between the polylines and the labels when the values are very close to ...
- 39
0
votes
0
answers
61
views
cola.js and d3 latest version
cola is exactly what I need for a few things - mainly it does forced based graph layouts supporting grouping and constraints. I'm using it with d3.
However, I've noticed cola seems to tap out at d3 ...
- 3,724
0
votes
0
answers
34
views
D3 linkHorizontal Argument is not assignable to parameter
I'm trying to create a simpler version of the D3 Tidy Tree (https://observablehq.com/@d3/tree/2). Here is the full JS file:
const width = 800;
const height = 600;
const svg = d3
.select('svg')
....
- 679
0
votes
0
answers
42
views
d3 - graph is rendered outside the svg
As per the pictures below the g element is rendered outside the svg (above the svg) so many nodes are covered by other HTML elements.
The svg element's position:
The g element's position:
I'd expect ...
- 1,519
0
votes
1
answer
45
views
d3 - old topic - custom image on node
It is an old topic and read many questions regarding this issue but I still can't figure it out what the error can be. My only excuse is that I am pretty new with d3.
So I'd like a custom image or svg ...
- 1,519
1
vote
1
answer
200
views
D3 network graph
I have created a d3 network graph which is working fine, issue is if there is a connection between (A -> B and B -> A) i want separate links for that. How can i do that?
This is what i have done ...
- 392