There’s a bounding box example in my talk on force layouts. The position Verlet integration allows you to define geometric constraints (such as bounding boxes and collision detection) inside the “tick” event listener; simply move the nodes to comply with the constraint and the simulation will adapt accordingly. That said, gravity is definitely a more … Read more
If you peruse the release notes, you’ll see a full explanation of everything that’s changed between the final release of 2.x (2.10.3) and the most recent release, 3.2.7. In particular, from release 3.2.2: Better handling of drag gestures in d3.behavior.drag, d3.behavior.zoom and d3.svg.brush by not preventing default behaviors or stopping propagation. For example, mousedown now … Read more
To create a linear scale with d3.js version 3 use API d3.scale.linear() and to create a linear scale with version 4 and 5 use API d3.scaleLinear() API references for creating a linear scale for both the versions can be found here: v3.x scale.linear v4.x scaleLinear
The differences listed in the linked question/answers speak to the general differences between svg and canvas (vector/raster, etc). However, with d3 these differences have additional implications, especially considering that a core part of d3 is data binding. Data Binding Perhaps the most central feature of d3 is data binding. Mike Bostock states he needed to … Read more
When you join data to a selection via selection.data, the number of elements in your data array should match the number of elements in the selection. Your data array has two elements (for Jim and Ray), but the selection you are binding it to only has one SVG element. Are you trying to create multiple … Read more
iOS7 has notably bad performance animating SVG with JavaScript – although static SVG drawing is massively faster. We wrote a blog on the performance of the iOS7 release, which you can see for more gory details. Update: iOS7.1 fixed the javascript animation performance problem. It’s back to 50 fps
A web server definitely isn’t required to use a client side JavaScript library like d3.js. For C#, you’ll need to embed a web browser control (in either WindowsForms or WPF). You’ll need to make sure that the browser is working in IE9 Standards mode as shown here. Create your web pages as you would normally. … Read more
Edit 2016-10-07: For a more general approach see addendum below. According to the changelog it is gone. There is a function in transform/decompose.js, though, which does the calculations for internal use. Sadly, it is not exposed for external use. That said, this is easily done even without putting any D3 to use: function getTranslation(transform) { … Read more
You can use the following: var svg = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘svg’); Note the use of createElementNS. This is required because svg elements are not in the same XHTML namespace as most HTML elements. This code creates a new svg element, as you would regardless of using D3 or not, and then creates a selection over that … Read more
Here’s a nice way to use svg-crowbar.js to provide a button on your site to allow your users to download your visualization as svg. 1) Define your button’s CSS: .download { background: #333; color: #FFF; font-weight: 900; border: 2px solid #B10000; padding: 4px; margin:4px; } 2) Define your button’s HTML/JS: <i class=”download” href=”https://stackoverflow.com/questions/8435537/javascript:(function () { … Read more