The most natural way to manipulate just one element is using the filter function: var data = [[0,0,2],[0,23,5],[2,12,5]]; var circleSet = svg.selectAll() .data(data) .enter() .append(‘circle’); var filteredCircleSet = circleSet .filter(function (d, i) { return i === 1;}) // put all your operations on the second element, e.g. .append(‘h1’).text(‘foo’); Note that depending on what you do … Read more
use a comprehension for d, i in flights console.log d, i The code above translates to var d, i, _i, _len; for (i = _i = 0, _len = flights.length; _i < _len; i = ++_i) { d = flights[i]; console.log(d, i); } so you can see d and i are what you want them … Read more
The simplest way is to filter your array before calling .data( … ): d3.select(“body”).selectAll(“p”) .data([4, 8, 15, 16, 23, 42].filter(function(d){ return d < 10; })) .enter().append(“div”) .text(function(d) { return d; }); will create a div only for 4 and 8. Alternatively, you can filter your selection after binding your array to elements on the page … Read more
Does this need to be a service? Here’s how I’ve approached this in the past, using free/Open Source tools: Download public-domain shape files from Natural Earth Data Use Quantum GIS to convert .shp to .geojson (one step, under “Layer > Save As…”) Now you have hi-res GeoJSON data. This is a really big file, though, … Read more
To display your svg within a canvas, you first have to convert it using a parser/renderer utility such as http://code.google.com/p/canvg/ (code adapted from: Convert SVG to image (JPEG, PNG, etc.) in the browser, not tested) // the canvg call that takes the svg xml and converts it to a canvas canvg(‘canvas’, $(“#my-svg”).html()); // the canvas … Read more
There are some options, but I believe each would require a bit of work. It would help if there were one single standard for representing a family tree in JSON. I’ve recently noticed that geni.com has a quite in-depth API for this. Perhaps coding against their API would be a good idea for reusability… — … Read more
Found out that although .off() is not supported for d3 v2.9.1, an alternative is .on(‘click’,null) Fully: add_listeners = function() { // Remove handler before adding, to avoid superfluous handlers on elements. d3.selectAll(“.nodes”).on(‘click’,null); d3.selectAll(“.nodes”).on(“click”, function() { //Event handler }); } Reference: https://github.com/d3/d3-selection#selection_on
I think the documentation gives a good answer to this question: https://github.com/mbostock/d3/wiki/Selections#wiki-datum. Basically, the point is that in some cases you are not interested in the enter/exit sets when you do a selection. If this is the case, which often seems to be the case for the full chart, you use datum. Update: It depends: … Read more
Dashing, with a demo here. Licensed under the MIT License
I have made a small code snippet. Hope this is helpful. var data = { nodes: [{ name: “A”, x: 200, y: 150 }, { name: “B”, x: 140, y: 300 }, { name: “C”, x: 300, y: 300 }, { name: “D”, x: 300, y: 180 }], links: [{ source: 0, target: 1 }, … Read more