D3 Key Function

I’m also new to d3 and was struggling with the key function. I didn’t find Tristan Reid’s answer illuminating, because it doesn’t really talk much about the key function. Let’s work through an example, first without a key function, and then with. Here’s our initial html before applying javascript. We’ve got two divs, and there … Read more

Add ellipses to overflowing text in SVG?

a wrapper function for overflowing text: function wrap() { var self = d3.select(this), textLength = self.node().getComputedTextLength(), text = self.text(); while (textLength > (width – 2 * padding) && text.length > 0) { text = text.slice(0, -1); self.text(text + ‘…’); textLength = self.node().getComputedTextLength(); } } usage: text.append(‘tspan’).text(function(d) { return d.name; }).each(wrap);

How to disable double click zoom for d3.behavior.zoom?

You can disable the double-click behavior by removing the zoom behavior’s dblclick event listener. Looking at your code, you’ve assigned the zoom behavior to the SVG element. So you could say: d3.select(“svg”).on(“dblclick.zoom”, null); Or, together with where you register the zoom behavior: .call(d3.behavior.zoom().on(“zoom”, update)).on(“dblclick.zoom”, null) You might also want to move the zoom behavior down … Read more

d3 js – loading json without a http get

Simply replace d3.json call with json = JSON.parse( myjson ); IE: var myjson = ‘{“name”: “flare”,”children”: [{“name”: “analytics”,”children”: [{“name”: “cluster”,”children”: [{“name”: “MergeEdge”, “size”: 10 }]}]}]}’; // d3.json(“/path/flare.json”, function(json) { #delete this line json = JSON.parse( myjson ); //add this line //rendering logic here //} #delete this line UPDATE 09/2013 Original code has changed. So varname … Read more

Add text label to d3 node in Force layout

Right now, you are appending the text elements to the circle elements, and that simply won’t work. When you write… var label = nodes.append(“svg:text”) You’re appending the texts to the nodesselection. However, you have to keep in mind what nodes is: var nodes = svg.selectAll(“circle”) .data(dataset.nodes) .enter() .append(“circle”) Thus, you are appending the texts to … Read more

Plotting points on a map with D3

You have a simple typo in your code — coordinates should be passed as (longitude, latitude) to the projection, not the other way round. This code should work fine: svg.selectAll(“.pin”) .data(places) .enter().append(“circle”, “.pin”) .attr(“r”, 5) .attr(“transform”, function(d) { return “translate(” + projection([ d.location.longitude, d.location.latitude ]) + “)”; });