39,287 questions
0
votes
0
answers
15
views
organisation chart using d3 in angular
D3 version 7.9.0, D3-org-chart version 3.1.1, Angular version 16... I made an organizational chart, however I would want it to be horizontal, from left to right.
When I attempt to use direction (....
- 1
0
votes
0
answers
31
views
D3JS: How can I allow space for dynamic width labels?
I am completely new to d3js and I have a problem with the labels, especially on the y-axis on a horizontal bar chart, but in general the labels are also a problem.
If I use longer labels, they are cut ...
- 301
-2
votes
0
answers
17
views
How to Optimize Large Datasets for Power BI & D3.js Interactive Visualizations? [closed]
I am working on a large-scale data visualization project, where I need to display millions of records efficiently using both Power BI and D3.js for interactive dashboards. However, I am facing ...
0
votes
0
answers
24
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
17
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 ...
0
votes
0
answers
29
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,613
1
vote
1
answer
30
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 ...
- 186
2
votes
0
answers
41
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, &...
- 176
1
vote
1
answer
32
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
28
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
42
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,384
2
votes
1
answer
144
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
29
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
38
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
18
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
17
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
51
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
29
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 ...
- 129
0
votes
1
answer
41
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
35
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,654
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')
....
- 663
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 ...
- 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 ...
- 1,487
1
vote
1
answer
69
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 ...
- 382
0
votes
1
answer
33
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
64
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
92
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', ...,...
- 14.3k
-1
votes
1
answer
53
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 ...
- 3
0
votes
1
answer
58
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 ...
- 619
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
24
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
46
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 ...
- 11
0
votes
0
answers
46
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 ...
- 1
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 ...
- 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 = ...
- 619
0
votes
0
answers
56
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 ...
- 11
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 *...
- 323
0
votes
0
answers
29
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 ...
- 172
2
votes
1
answer
59
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,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 ...
- 861
1
vote
1
answer
47
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,689
1
vote
0
answers
67
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
40
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.
...
- 105
0
votes
1
answer
34
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, ...
- 1,301
0
votes
0
answers
33
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 ...
- 21
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
37
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 ...
- 29
0
votes
0
answers
44
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 ...
- 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 ...