d3.js - D3 draw single element from geojson -
am pretty new both js , d3js. trying create single circle on map transitions (size increases decreases) through data. however, example, 4 elements added svg. , size of each of them changes @ same time. however, want create single circle transitions using count field. link current block: https://bl.ocks.org/shannondussoye/e8feaa2cf22f7e6a7d12582b923d999f
thanks
your code here:
var circle = svg.selectall("circle") .data(data.features) .enter() .append("circle"); will append 1 circle each item in array data.features (assuming no circles present). there 4 items in array, you'll have 4 circles. if want append 1 circle, change input data array array of 1 feature:
.data([data.features[0]]).enter().append()...
then, can update data, after initial append, when want transition new feature:
.data([data.features[i]]) .attr("attr updated",...) the example below applies method in non-geographic setting: 1. append feature, 2. update feature properties next item in array, 3. repeat:
var svg = d3.select("body") .append("svg") .attr("width",400) .attr("height",400); var data = [{x:100,y:100,r:10},{x:200,y:100,r:30},{x:200,y:200,r:10},{y:200,x:100,r:25}]; var circle = svg.selectall("circle") .data([data[0]]) .enter() .append("circle") .attr("cx",function(d) { return d.x; }) .attr("cy",function(d) { return d.y; }) .attr("r",function(d) { return d.r; }); var = 0; transition(); function transition() { circle.data([data[++i%4]]) // next item in data array, assign datum feature .transition() .attr("cx",function(d) { return d.x; }) // update properties of feature .attr("cy",function(d) { return d.y; }) .attr("r", function(d) { return d.r; }) .each("end",transition) // loop .duration(2000) }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>here map method (with minimal code changes - though regretfully changed json file name)
Comments
Post a Comment