Skip to main content
Join Stack Overflow’s first live community AMA on February 26th, at 3 PM ET. Learn more
Filter by
Sorted by
Tagged with
2 votes
1 answer
106 views
+50

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 ...
Avora's user avatar
  • 272
1 vote
0 answers
27 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&...
Hidde Ploysiri's user avatar
0 votes
1 answer
33 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 ...
Romen Medina Beltrán's user avatar
0 votes
0 answers
17 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 ...
user84162's user avatar
1 vote
1 answer
15 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 ...
thepeatles's user avatar
0 votes
0 answers
48 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=&...
Leigh Hobson's user avatar
0 votes
0 answers
27 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 ...
Kevin Yao's user avatar
  • 129
0 votes
1 answer
38 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 ...
Ta Abd's user avatar
  • 39
0 votes
0 answers
27 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 ...
Darren Oakey's user avatar
  • 3,614
0 votes
0 answers
26 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') ....
Kadiem Alqazzaz's user avatar
0 votes
0 answers
32 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 ...
Viktor's user avatar
  • 1,487
0 votes
1 answer
36 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 ...
Viktor's user avatar
  • 1,487
1 vote
1 answer
40 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 ...
Faizan Ahmad's user avatar
1 vote
1 answer
32 views

How can I get this d3js custom shape?

enter image description here I am trying to create the shape of the image using d3js (if it's any simpler way, please let me know) I tried doing it but I don't get it right, I don't get the end and ...
Global Ant's user avatar
0 votes
0 answers
34 views

D3. How to scale the text so that it all fits into the drawing area

I use D3 to draw everything on the screen, the problem is that i want all the elements to fit in the block, while leaving as little free space as possible, how to do this, size can take a value from 1 ...
CriticalError's user avatar
0 votes
0 answers
62 views

SVG 'auto-start-reverse' attribute prevents a document from opening in Visio and leads to unexpected behaviour

I have a simple SVG file that defines an arrowhead at attaches in to the end of the line like this: <defs> <!-- A marker to be used as an arrowhead --> <marker id="...
katrin_melody's user avatar
3 votes
1 answer
91 views

How to simply generate N colors?

I'm using D3 7.9 and can't find a way to simply generate N colors, for example, from rainbow. How do you do that outside the D3 way of doing things? For example; const categories = ['a', 'b', 'c', ...,...
SkyWalker's user avatar
  • 14.3k
-1 votes
1 answer
51 views

Hover Issue with D3 Ribbon Path in Safari

I'm experiencing an issue with D3.js ribbons in Safari where certain SVG path elements don't respond to hover events for styling changes. The hover effect, such as changing the fill style, works ...
joko3ono's user avatar
0 votes
1 answer
55 views

d3js change the color of a link in a tree based on certain data

In my angularjs project I'm using d3js to build a 'collapsible tree' and I used the code from this example Now I want to make each link have different color based on certain data. What I tried first ...
Daniel_Kamel's user avatar
0 votes
1 answer
39 views

Upgrading d3-sankey chart to latest version shows issue with layout method

how to resolve issue with d3-sankey chart? I am upgrading sankey chart from 0.4.2 version to latest version, which gives error with layout method which is deprecated in latest version. Code: sankey ....
Shalabh Goel's user avatar
0 votes
1 answer
23 views

d3 tick format to change unicode to HYPHEN-MINUS (U+002D) for negative values

I realized d3.js returns negative values on xAxis with MINUS unicode (U+2212), but I need it as HYPHEN-MINUS unicode(U+002D). How can I do that within the code below; const locale = d3....
Hatice Yazıcı's user avatar
1 vote
1 answer
45 views

D3 dendrogram filter out descendents given a number of links

I encountered this problem and struggled to figure out a solution. I'll try my best to describe it. The problem I'm trying to solve is, given a number (you can interpret it as the number of links or ...
hiPeilin's user avatar
0 votes
0 answers
44 views

D3.js: getting "TypeError: cannot read properties of undefined" from my json dataset. I do not know why

I am trying to load my data onto a d3.js map but I keep getting this error: TypeError: cannot read properties of undefined I am using my own json data and nothing is mapping. It seems that it cannot ...
gb_rsh02's user avatar
0 votes
1 answer
33 views

Line not appearing on line chart only y-axis and x-axis appear in d3.js linechart

I am trying to create a line graph in d3.js but only my axes are appearing; the line doesn't show. I think there might be something wrong with how i use the nest but i don't have any idea how to fix ...
Zero's user avatar
  • 1
0 votes
1 answer
31 views

d3js zoom and pan only works when mouse already over an element in svg

In my angularjs project I used d3js to build a collapsible tree, I used the code provided here. Now I'm trying to add some simple zoom and pan functionality: var initZoom = function () { var zoom = ...
Daniel_Kamel's user avatar
0 votes
0 answers
53 views

Vulnerable child dependencies fix required, nextjs, nodejs

I am doing npm audit on my project and I am getting # npm audit report d3-color <3.1.0 Severity: high d3-color vulnerable to ReDoS - https://github.com/advisories/GHSA-36jr-mh4h-2g58 fix available ...
Tanuj0610's user avatar
2 votes
1 answer
42 views

Why d3.select(this) does not return expected node inside d3.selection.each call?

According to the documentation of d3.selection.each, this and nodes[i] should refer to the parent node, but d3.select(this) (commented line) does not refers to the div? What am I missing here? import *...
rndblnch's user avatar
  • 323
0 votes
0 answers
28 views

How to have interactions with right mouse click as well as brush in d3

I have a scatterplot with a tooltip interaction on the points using the right mouse button. On top of it I added a 2D brush, it works perfectly, but I cannot iniziate brushing if I am on a datapoint ...
LukeTheWalker's user avatar
2 votes
1 answer
58 views

How can I simulate firefox animation behaviour on chrome when using calcMode="linear"?

I have two charts, the first one plots two functions, predators and prey. Each containing a circle with an animateMotion that goes along the function path. The other chart is a phase curve generated ...
Ignacio Mariotti's user avatar
2 votes
1 answer
53 views

How to change the chart arch color on mouse hover effect?

How to do the pie chart arch color change on mouse hover ? Using .outerRadius(103 + 5); for hover transform, but how to apply some color change for arch? Please help var arcOver = d3.arc() ....
PRANAV's user avatar
  • 1,111
1 vote
1 answer
55 views

How do I colorize the area only under the timeseries line?

Using D3 JS, I am making a timeseries plot, and trying to colorize the area only under the timseries line. The code below adds horizontal colored blocks, first, below the green threshold, second ...
khajlk's user avatar
  • 861
1 vote
1 answer
43 views

D3: Position marker does not follow graph when zooming and panning

I have a D3.js graph with a vertical red line that marks the value of variable x. The value of x is determined by a range slider on the page. The problem is that when the graph is panned/zoomed, the ...
Mentalist's user avatar
  • 1,633
1 vote
0 answers
59 views

The sankey diagram made with d3 fails and has overlapping nodes

I have a problem making a sankey chart with d3. It has to be in an HTML file without using frameworks so that it can be sent without further ado. The problem is that nodes 4 and 5 are overlapping and ...
Alfonso Sanchez's user avatar
0 votes
0 answers
37 views

How to render a custom node for @nivo/tree

I am trying to make a tree structure in react. I was trying with @nivo/tree. There's very limited documentation for this library. I couldn't get it to render a custom node. Attaching the code here. ...
Arun K Anil's user avatar
0 votes
1 answer
33 views

d3 Zoom not synchronised when using a offset with a canvas

I'm trying to create a canvas plot with a zoom and margin so I have space to draw the axis. However I notice that when I add a large left margin e.g. const margin = { top: 20, right: 20, bottom: 40, ...
Tom's user avatar
  • 1,301
0 votes
0 answers
28 views

how to use force-graph in angular?

how to use force-graph in angular? I'm trying to use force graph in angular8,but i not found angular force graph package in NPM, I tried the following: 1、install depend npm install d3 --save npm ...
MengYunlong's user avatar
0 votes
0 answers
23 views

Two independent scales on one chart D3

I have a line chart created in d3 (but drawn with Skia, since it's for mobile app using react native, I use d3 for calculations, scales etc.), which has 2 lines on it. Both of the lines have different ...
Adam Waśniewski's user avatar
1 vote
0 answers
34 views

d3.js not displaying geoJSON properly after simplification

I am trying to display a geoJSON map using d3.js. I have a geoJSON file that is far too large. d3 will display that one just fine. However, when I run it through the mapshaper simplification tool, d3 ...
Leo's user avatar
  • 29
0 votes
0 answers
43 views

How to Make D3 SVG responsive in react with viewbox

How can I make my D3.js line chart responsive and scrollable horizontally? Currently, when I resize the window, the SVG size does not adjust, and the chart is not responsive. The chart width ...
Sagar H's user avatar
  • 5,541
0 votes
0 answers
22 views

How to dyanamically get the data on sql using d3.js with recursive functions?

I built a tree with d3.js. The Head and children as shown in the image attached: https://www.awesomescreenshot.com/image/51112170?key=ef216990b59101f1fa063f72df525fb4 If it is ordinary HTML and ...
M. Espinosa's user avatar
1 vote
2 answers
51 views

D3 multiline grafhic Error: <path> attribute d: Expected number, "MNaN,346.47LNaN,3…"

Im trying to create a multiline graphic whith D3, in body I have this Line: <svg id="lineChart1" width="600" height="400"></svg> this is the js code: ...
Andrea P's user avatar
1 vote
1 answer
64 views

Not defined error in Node.js + Express.js + Ejs project

I'm building website based on node.js(express.js), MYSQL and Ejs. And I was trying to present graph with d3.js This is part of script in mainpage.ejs <script src="https://d3js.org/d3.v6....
mkbmob1004's user avatar
0 votes
0 answers
50 views

Vite and three js web app deployed on vercel is not redirecting to other page

I have created a web app to explore solar system which consists of two pages Which shows the main solar system and how it works Which gives you the experience of 3D model of each planet And when I ...
Yash 's user avatar
0 votes
0 answers
89 views

How to generate a burndown chart from a burnup chart?

I am trying to replicate the effect of the burndown chart in the picture of action items which rely upon different fields, called Estimated Completion Date, Original Due Date, and Closed Date, and use ...
Vahe's user avatar
  • 1,841
0 votes
1 answer
56 views

.nodeColor() not updating node color for 3d-force-graph

i am having trouble changing the node color for my visualization using 3d-force-graph. <head> <style> body { margin: 0; } </style> <script src="//unpkg.com/3d-...
ss16525's user avatar
0 votes
0 answers
32 views

X axis not showing on d3 graph

Hello I'm currently creating a line chart that takes in as x values the seconds in my .csv file and takes in as y values the value of the signal that represents a patients electrodermal activity. I've ...
Mig Rivera Cueva's user avatar
1 vote
1 answer
38 views

How can I use the d3.join method to create a clickable/interactive legend?

I am trying to create a clickable legend functionality in D3 version 7, using the .join() method. My legend buttons are working and transmitting information correctly. However, there is something ...
amunnelly's user avatar
  • 1,196
0 votes
0 answers
55 views

D3 GeoJSON generated from TopoJSON renders some but not all features.. why is this?

I am trying to render a congressional boundaries map using d3. I am able to do this with the plain geojson file, but because it is quite large, I was trying to trim it down geo2topo. Now when I try to ...
anderruhr's user avatar
1 vote
0 answers
28 views

Trying to setup HTML, Javascript, D3 work environment

I am currently trying to teach myself D3 so that I can create some cool data visualizations, however, I am having difficulty getting past the beginning setup. I would be incredibly grateful for any ...
William Quin Webster's user avatar
0 votes
1 answer
40 views

Upgrading D3.js within Sencha ExtJS

We are currently licensed for Ext JS Premium. Ext JS Premium 7.4.0.42 was released on May 6, 2021. I need some cool stuff from https://github.com/d3/d3-interpolate/blob/main/README.md I noticed in one ...
SMerrill8's user avatar
  • 568

1
2 3 4 5
786