39,274 questions
0
votes
0
answers
10
views
d3.js bar graph not showing when code runs
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
29
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 ...
0
votes
0
answers
17
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 ...
1
vote
0
answers
20
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 &...
0
votes
0
answers
41
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')
...
0
votes
0
answers
29
views
Best method for drawing to a grid using d3?
So I've found myself needing to make grids of different things for visualizations and the work flow for me has usually been:
write and test a function to draw one element of the grid
fiddle a bunch ...
2
votes
1
answer
27
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 ...
0
votes
0
answers
54
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 ...
-1
votes
0
answers
34
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
votes
0
answers
81
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 ...
0
votes
0
answers
31
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
21
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
33
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
vote
1
answer
32
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 ...
2
votes
0
answers
44
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, &...
1
vote
1
answer
35
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 ...
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 ...
0
votes
0
answers
44
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 ...
2
votes
1
answer
152
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 ...
2
votes
0
answers
30
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
41
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
21
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
18
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
53
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
32
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
47
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
39
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
28
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
37
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
98
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 ...
0
votes
1
answer
34
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
66
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', ...,...
-1
votes
1
answer
54
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
59
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
41
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
27
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
47
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
47
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
34
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
70
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
30
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
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
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
50
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
71
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 ...