Hmm, does anyone know a working example to export D3 charts to SVG? It's fine to run it offline. Right now, I'm using a headless chrome to render my charts into PDF. Then I'm running a batch process to convert the PDF to SVG using Inkscape. I know many guys running this toolchain - but it's awful.
@tobwen presumably your charts are being rendered in SVG, if you're using headless chrome you could save the svg directly, it looks like this article has code snippets for that: https://intoli.com/blog/saving-images/
also, this chrome extension helps download svg generated by d3: https://nytimes.github.io/svg-crowbar/ i don't know how hard it would be to adapt its code to work on headless chrome
@enjalot Thanks for the hint. I'm already using Puppeteer - it's a great tool. After some hours of trying, I got some working code for my D3 charts. All those bookmarklets didn't work for me. The main reason for this was: missing CSS styles. I've written a small tool in PHP, which scans all the elements for the styles used. I'll add them to XML/SVG definitions then. I think of porting it to Javascript and upload it to Github. Might take a while, since I'm not into "modern" JS :-)
@tobwen have you seen https://observablehq.com/@harrystevens/directly-labelling-lines
Thanks. I know this concept from cartography. Perhaps I can get it to work in my charts.
@enjalot But I don't think this will help me with my problem :-(
Not much activity here, much better on the d3 slack: https://app.slack.com/client/T07ET41GS/C07ET41MG/thread/CRZBL735G-1600445243.005400 I think this is the invite link: https://d3-slackin.herokuapp.com/
I need some help with a D3js project for Free Code Camp. My code: https://codepen.io/DragonOsman/pen/ExgxXYo . The specs: https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart . I need help with getting the bars' x values and heights right. I'm stuck. What am I doing wrong?
Hi, I have a question regarding getBbox method. It seems if I select multiple svg elements and do a
selection.node().getBbox() on them the bounding box returned is only gonna be for a single element, can anyone confirm if my understanding correct here? (In other words, one has to come up with his/her own algo to compute composite bounding box)
selection.nodes() returns all nodes
Say, the
join() is defined a way so that it cannot return SVGGElement even if you pass it: join('g').
As the result, it cannot be further seeded to a mere axis builder, as the latter wants either SVG or G element
do most d3 packages assume that they're being called from some d3 master object and therefore require
this (i.e. they aren't pure functions)?
How to extend d3 with additional functions? For example there is .attr() function on selection but I want to add mine
e.g.
attrs()
You can implement data fetch on demand. See d3-fetch library here: D3-Fetch
Another example here: Stackoverflow
Another example here: Stackoverflow
Or may be ever reconsider changing the workflow, I have not seen the data but seems difficult to imagine that user would be looking at 10,000 datapoints all at once.... you could experiment with delayed loading of data but if you want all datapoints to be loaded sooner or later....memory and CPU requirement would make you face the same issues....sooner or later.
I have developed a software utility using d3.js library... I would like to apply for copyright for the utility that I have developed
Is it legal? Will it violate licensing or any other terms of d3.js...
1 reply
Is is valid & correct? .. Please suggest... Thanks
Hi I'm student from Northeastern. I was making an animated scatter plot with dropdown to select group. The dataset I’m using is Biden’s 2022 satisfaction rate. However, I couldn’t make it works properly, as the video shows. I tried for a long time but still failed to figure the reasons out. My codes are here. Great appreciation if someone could help me. Thank you!
