I've just started learning D3. It's at version 4 now and unfortunately most of the tutorials and examples online are of version 3.
I'm trying to create circles. But can't seem to get the attr method to work. I've created fiddles, simplified to render just one circle;
D3 v3 : https://jsfiddle.net/pratheepraj/595rrqc2/
D3 v4 : https://jsfiddle.net/pratheepraj/Ldokhq2e/2/
As you can see the exact code works in v3 but not in v4. In v4 if you inspect the element, the circles get created but the attributes are not set. Could u guys point out what should be changed for v4.
In D3 v4 you have two options:
Use .attr with a single attribute (see working example here: https://jsfiddle.net/yxprgokp/1/)
Use .attrs with attributes as an object, and an extra plugin to do that (https://github.com/d3/d3-selection-multi):
This module is not included in the default D3 bundle for parsimony’s sake: the single-value methods such as selection.attr are recommended for most users, as there is little benefit to the shorter syntax provided by these convenience method.
Original issue on GitHub: https://github.com/d3/d3/issues/2793
Related
I am trying to reproduce and combine the D3 v3 Hierarchical edge bundling tree-map with the D3 v4 Zoomable Tree-map. I'd like to transfer the code logic that draws the link lines to the zoomable tree-map. I'm currently having difficulty finding the D3 v4 equivalent implementation of "d3.layout.bundle()". I have tried d3.bundle() but that just simply fails. I have tried simply copying the v3 line "var bundle = d3.layout.bundle()" but this also fails when referencing v4 library, with the error "Cannot read properties of undefined (reading 'bundle')"
Where as D3 v3 d3.layout.treemap has been ported to d3.treemap, there does not seem any direct equivalent for d3.layout.bundle.
I'd like to visualize a geojson file in the EPSG:4326 coordinate reference system using D3.js version 3. I'm aware it's better to use the newest version, but alas I'm restricted because of old software that doesn't support higher versions.
I wrote this code: https://bl.ocks.org/FrieseWoudloper/141945ce346639013ac1ced8e4c071b7
In the resulting output there is an SVG element with paths, but I don't see it. I think I have the translate and scale arguments wrong, but I don't know how to determine the right values. Could you please give me any directions on how to fix this?
Complete fiddle here: https://jsfiddle.net/scottbrown0001/o7qL4dpr/
I'm trying to emulate Mike Bostock's object constancy example https://bost.ocks.org/mike/constancy/, and I can't figure out what is selected by the each() on his line line 133:
function change() {
clearTimeout(timeout);
d3.transition()
.duration(altKey ? 7500 : 750)
.each(redraw);
}
I'm using what seems like the same construction in my fiddle example, and while it does seem to get the transition effect to run I don't see the slower duration. In general, what does this construct d3.transition.each() select in concrete specifics? It seems like it may be some kind of "master transition", but I can't see how the each() iteration is working. I must have some key difference but I don't see it.
Much like in your other question, this is something that has a lot to do with d3 v3 vs d3 v4. You will not be able to reproduce the behaviour with this code in v4
Have a look at this section of the d3 v4 release notes where mbostock addresses the changes in transition.each :
This method replaces the deeply magical behavior of transition.each in 3.x; in 4.0, transition.each is identical to selection.each
In v3, transition.each was different as documented here : https://github.com/d3/d3-3.x-api-reference/blob/master/Transitions.md#each
[...] immediately invokes the specified function for each element in the current transition, passing in the current datum d and index i, with the this context of the current DOM element.
So basically the reason why it's not working the same way is that now, transition.each will loop through each element affected by the transition.
I work on a d3js project and I saw some tutorial with append("g") and other with append("svg:g") without getting the difference between both.
In the very early days of D3 you were required to use the svg:g syntax because of the way SVG elements are appended to the DOM. Later versions of D3 don't require these "hints" to insert SVG elements, so the proper way to do this now would be with a simple g.
The technical details behind this are rather dull, SVG requires a namespace, so when you insert or manipulate SVG elements you use document.createElementNS('a', "http://www.w3.org/2000/svg) white plain HTML uses document.createElement('a'). Since D3 can manipulate both SVG and HTML d3.append('svg:a') was a way of saying this is an SVG anchor.
I got an answer on d3js API, its a namespace question. In svg:g, svg is the namespace (optional).
My fault, sorry i must better read API
I like the d3 sortable bar chart example:
Unfortunately, it doesn't appear to work correctly in v2 (the example uses v3). At first, I thought it was me, so wrote a new example from scratch. Alas, it wasn't! In v2 the x axis labels don't transition with the bars; in v3 both labels and bars transition together.
Can anyone suggest a workaround for v2?
Thanks in advance.
Okay, I think there are two solutions to this problem. As Robert Harvey pointed out, you could use v3. The main difference that I can see so far is that d3.tsv (and possibly the other read data methods) take an additional parameter: this was what was causing the other parts of my code to fail. So, even though v3 isn't the latest release, this is my preferred solution.
The second solution is to transition the axis labels explicitly. This would take more code and as v3 is (hopefully!) on the horizon, might only be necessary if you really can't wait and absolutely must use v2.