d3.js-v4

I'm trying to display a map of a single state, with zooming and panning constrained to the boundaries of the state. It's mostly working, except for the panning constraint when the state path is scaled to fit a smaller container. I think this comes down to me not understanding what arguments to use for zoom.translateExtent (although I'm very new to this, so it could be something else). Live example on bl.ocks.org, with links to prior art . One notable thing is that I'm using a null projection for d3.geoPath , because I used ogr2ogr to generate a shapefile in projected coordinates for each state

If you play with the collapsible tree below you'll see that when you get to the end of the tree, and expand and collapse the nodes the lines are doing some wacky stuff and I am no entirely sure what drives the behavior or if my rewriting of enter link description here is completely off base. I went off a flat data structure and used stratify to transform it into a tree layout. The only issue so far is the line transitions...any thoughts? var data = [{ "name": "Hazer 5000", "parent": "CFO", "img": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-342/stephen.jpg" }, { "name": "Employee 1",

Drag and Drop Example I am trying to rewrite part of this example above to use in my code, specifically this piece: function centerNode(source) { scale = zoomListener.scale(); x = -source.y0; y = -source.x0; x = x * scale + viewerWidth / 2; y = y * scale + viewerHeight / 2; d3.select('g').transition() .duration(duration) .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); zoomListener.scale(scale); zoomListener.translate([x, y]); } However I am getting stuck since the v4 package has changed quite a bit. I wrote my zoomListener function to be var zoomListener = d3.zoom()

I am using the D3 library to move an item within a Venn-diagram. When I stop dragging I want to determine the position of the item in the diagram. item.call(d3.drag() .on("start", this.dragstarted) .on("drag", this.dragged) .on("end", this.dragended) ); These are the functions I call when the dragging starts, is going on and ends. dragended(d: TCMemberScenario, i: number) { d3.select(this).classed("active", false); d.calculateRoles(); this.save(); } This is the function that is called when the dragging has ended. I update some things in the diagram and then I want to call the save method. This

I would like to create an ordinal scale with one to one correspondence between range and domain. I would expect that values/strings that do not belong to the domain would return nothing. Instead I get the following behaviour: var x = d3.scaleOrdinal().domain(['a', 'b', 'c']).range([10, 20, 30]) x('d') 10 x('e') 20 x('f') 30 Is there any logic behind this behaviour? Maybe I am missing something, but I couldn't find something out there. Gerardo Furtado That's the expected behaviour of an ordinal scale. Actually, D3 scales (quantitative or qualitative) are made in such a way that you can pass

I have a very similar task as D3.js nesting and rollup at same time and solution provided by @altocumulus for d3.js v3 works perfectly fine for me (tested). However, I am using d3.js v4 across my website and I am having difficulties replicating the same approach with v4 - I am not getting the same results. Perhaps, because I don't understand the sumChildren function. Please feel free to provide a better or different approach on how to restructure the loaded csv file as json with subtotals at every node level using d3.js v4. In my case, I need to have Population at the Country, State and the