SVG provides a native function called .getPointAtLength() which returns a the x and y values of a path at any length you pass at it. You would need to iterate through the length of the line until you find the corresponding y position. Here is how you would do it in D3: var svg = … Read more
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
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
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);
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
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
The filter code is a bit tricky in dc.js. If you specify an array of values, it will not interpret the array as a range. (It will either interpret the array as a single value, or if the array contains another array, it will filter on the values inside that array.) Try specifying a ranged … Read more
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
Yes, you can do this quite easily. The key is to use nested selections. That is, you pass in your top level list of lists and create a container element for each list. Then you do the nested selection and draw the actual elements. In this particular case, you also need to adjust the radii … Read more
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 ]) + “)”; });