javascript - How to load external JSON data from a Web API in d3.js? -
i trying create pie chart result of web api , have poly lines , legends.`
i got below code , working fine random data.
<!doctype html> <meta charset="utf-8"> <style> body { font-family: "helvetica neue", helvetica, arial, sans-serif; width: 960px; height: 500px; position: relative; } svg { width: 100%; height: 100%; } path.slice { stroke-width: 2px; } polyline { opacity: .3; stroke: black; stroke-width: 2px; fill: none; } </style> <body> duration: 0<input type="range" id="duration" min="0" max="5000">5000 <br> <button class="randomize">randomize</button> <script src="scripts/jquery-1.10.2.js"></script> <script src="scripts/d3.js"></script> <script> var svg = d3.select("body") .append("svg") .append("g") svg.append("g") .attr("class", "slices"); svg.append("g") .attr("class", "labels"); svg.append("g") .attr("class", "lines"); var width = 960, height = 450, radius = math.min(width, height) / 2; var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; }); var arc = d3.svg.arc() .outerradius(radius * 0.8) .innerradius(radius * 0.4); var outerarc = d3.svg.arc() .innerradius(radius * 0.9) .outerradius(radius * 0.9); svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var key = function(d){ return d.data.label; }; var color = d3.scale.category20() .domain(["lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"]) //.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); function randomdata (){ var labels = color.domain(); return labels.map(function(label){ return { label: label, value: math.random() } }).filter(function() { return math.random() > .5; }).sort(function(a,b) { return d3.ascending(a.label, b.label); }); } change(randomdata()); d3.select(".randomize") .on("click", function(){ change(randomdata()); }); function mergewithfirstequalzero(first, second){ var secondset = d3.set(); second.foreach(function(d) { secondset.add(d.label); }); var onlyfirst = first .filter(function(d){ return !secondset.has(d.label) }) .map(function(d) { return {label: d.label, value: 0}; }); return d3.merge([ second, onlyfirst ]) .sort(function(a,b) { return d3.ascending(a.label, b.label); }); } function change(data) { var duration = +document.getelementbyid("duration").value; var data0 = svg.select(".slices").selectall("path.slice") .data().map(function(d) { return d.data }); if (data0.length == 0) data0 = data; var = mergewithfirstequalzero(data, data0); var = mergewithfirstequalzero(data0, data); /* ------- slice arcs -------*/ var slice = svg.select(".slices").selectall("path.slice") .data(pie(was), key); slice.enter() .insert("path") .attr("class", "slice") .style("fill", function(d) { return color(d.data.label); }) .each(function(d) { this._current = d; }); slice = svg.select(".slices").selectall("path.slice") .data(pie(is), key); slice .transition().duration(duration) .attrtween("d", function(d) { var interpolate = d3.interpolate(this._current, d); var _this = this; return function(t) { _this._current = interpolate(t); return arc(_this._current); }; }); slice = svg.select(".slices").selectall("path.slice") .data(pie(data), key); slice .exit().transition().delay(duration).duration(0) .remove(); /* ------- text labels -------*/ var text = svg.select(".labels").selectall("text") .data(pie(was), key); text.enter() .append("text") .attr("dy", ".35em") .style("opacity", 0) .text(function(d) { return d.data.label; }) .each(function(d) { this._current = d; }); function midangle(d){ return d.startangle + (d.endangle - d.startangle)/2; } text = svg.select(".labels").selectall("text") .data(pie(is), key); text.transition().duration(duration) .style("opacity", function(d) { return d.data.value == 0 ? 0 : 1; }) .attrtween("transform", function(d) { var interpolate = d3.interpolate(this._current, d); var _this = this; return function(t) { var d2 = interpolate(t); _this._current = d2; var pos = outerarc.centroid(d2); pos[0] = radius * (midangle(d2) < math.pi ? 1 : -1); return "translate("+ pos +")"; }; }) .styletween("text-anchor", function(d){ var interpolate = d3.interpolate(this._current, d); return function(t) { var d2 = interpolate(t); return midangle(d2) < math.pi ? "start":"end"; }; }); text = svg.select(".labels").selectall("text") .data(pie(data), key); text .exit().transition().delay(duration) .remove(); /* ------- slice text polylines -------*/ var polyline = svg.select(".lines").selectall("polyline") .data(pie(was), key); polyline.enter() .append("polyline") .style("opacity", 0) .each(function(d) { this._current = d; }); polyline = svg.select(".lines").selectall("polyline") .data(pie(is), key); polyline.transition().duration(duration) .style("opacity", function(d) { return d.data.value == 0 ? 0 : .5; }) .attrtween("points", function(d){ this._current = this._current; var interpolate = d3.interpolate(this._current, d); var _this = this; return function(t) { var d2 = interpolate(t); _this._current = d2; var pos = outerarc.centroid(d2); pos[0] = radius * 0.95 * (midangle(d2) < math.pi ? 1 : -1); return [arc.centroid(d2), outerarc.centroid(d2), pos]; }; }); polyline = svg.select(".lines").selectall("polyline") .data(pie(data), key); polyline .exit().transition().delay(duration) .remove(); }; </script> </body> but want call data web api below.can 1 please guide on process new d3 , jquery/javascript.
$.ajax({ type: "get", url: "api/piechart", contenttype: "application/json; charset=utf-8", datatype: "json",
d3.js has excellent api fetch remote data web api.
it's documented here: https://github.com/d3/d3/wiki/requests
among other functions there convenience functions d3.json , d3.csv more low level functions d3.xhr.
so no need jquery here.
