Questions tagged [d3.js]
D3.js is a JavaScript library for creating interactive data-bound visualisations of documents using HTML, SVG, and Canvas. Questions should mention the version number of D3 you are using.
d3.js
12,353
questions with no upvoted or accepted answers
21
votes
0
answers
15k
views
Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)" on dc.js brushing
The purpose of my code is to use the range chart(bar chart) that shows the count of the datasets produced in years, to brush on the focus chart(line chart). The focus chart then displays the count on ...
17
votes
1
answer
15k
views
D3.JS time-series line chart with real-time data, panning and zooming
FIDDLE <<<< this has more up to date code than in the question.
I am trying to create a real-time (live-updating) time-series chart in d3, that can also be panned (in X) and zoomed. ...
11
votes
0
answers
821
views
D3 js background tab freeze while rendering to canvas
I'm facing an issue with D3.js. When rendering data to canvas the tab freezes when it being inactive. It easily become noticeable after several minutes of tab being in a background.
I've created an ...
9
votes
1
answer
1k
views
What typescript type do I assign d3.select() in order to be able select the SVG element using useRef hook?
Im trying to add the correct type to my d3.select statement in order set the mySVG variable.
function App() {
const [mySVG, setMySVG] = useState<d3.Selection<d3.BaseType, unknown, HTMLElement, ...
9
votes
0
answers
347
views
D3-zoom - View jumps when switching between drag and pan
I'm having an issue with d3-zoom that's racking my brain.
Here's a codepen: https://codepen.io/parliament718/pen/BaNQPXx
The Y-axis has the ability to drag it to rescale.
The problem is if I drag/...
9
votes
0
answers
2k
views
D3: Difference between layout.force & forceSimulation to build network graph
I am a beginner of D3 and was trying to grasp the ropes on how to build a proper force-directed graph in D3. There appear to be two different ways to build it.
Using layout.force. e.g
Using ...
9
votes
3
answers
3k
views
D3 v4 Brush and Zoom on the same element (without mouse events conflicting)
My goal is to build a D3 (v4) chart that uses both d3-zoom and d3-brush together, as follows:
When the mouse is positioned over the x-axis, the user can zoom (with the mouse wheel) or pan (by ...
9
votes
0
answers
3k
views
GeoJSON for floor plan
While evaluating different technology to represent an office floor plan (so, basically 3d geometry data and 2d representation), I came across many new javascript package for client side representation....
9
votes
2
answers
3k
views
D3.json setup cache to false
I noticed that redrawing D3 elements with its json call (d3.json) don't want to be updated on IE9+. The reason for it is that json calls gets cached so the browser doesn't register as new data has ...
9
votes
1
answer
804
views
How do you add d3-selection-multi to d3?
I love d3 V4's ability to make me feel completely incompetent. I can't seem to figure out how to make my own custom bundle in webpack along with my other modules... so instead I'm simply trying to ...
8
votes
1
answer
752
views
D3 Treemap v3 to v4
I am new to D3 and I am trying to convert a D3 Treemap from V3 to V4.
I have already read some information update the updated code but I can´t figure out to get it working.
The treemap is from the ...
8
votes
1
answer
396
views
Angular 4 + D3v4 : dragging circle not working correctly in conjunction with zooming
I am trying to create a D3 force-directed graph (https://github.com/d3/d3/blob/master/API.md#forces-d3-force) in an Angular 4 application.
It renders correctly dragging by it's self works, zooming ...
8
votes
0
answers
3k
views
Implementing d3 append react component
Is there any way to implement something like this:
d3.select("any-tag").append(<ReactComponent/>)
8
votes
0
answers
2k
views
combining force and pack layouts in d3
I have a graph represented with a standard force layout.
Nodes can be clustered by attributes.
Can I represent these clusters with a pack layout?
How will the 2 layouts coexist and how will the x ...
7
votes
0
answers
116
views
Fix misleading circle sizes calculated by circle packing
I have created a circle packing layout with a large hierarchical dataset. The image below shows what it looks like. The number in each circle corresponds to the number of leaf nodes.
Each leaf node is ...