39,297 questions
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 ...
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&...
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 ...
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 ...
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 ...
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=&...
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 ...
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 ...
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 ...
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')
....
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 ...
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 ...
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 ...
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 ...
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 ...
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="...
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', ...,...
-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 ...
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 ...
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
....
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....
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 ...
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 ...
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 ...
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 = ...
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 ...
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 *...
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 ...
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 ...
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()
....
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 ...
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 ...
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 ...
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.
...
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, ...
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 ...
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 ...
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 ...
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 ...
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 ...
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:
...
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....
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 ...
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 ...
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-...
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 ...
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 ...
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 ...
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 ...
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 ...