Does anyone know how to create a line/circle chart that has lines extended to different quadrants that represent different data points using JavaScript SVG?
The image below demonstrates what I'm seeking.
Started out by mapping a dougnut chart with placeholders where the line(s) could ricochet off.
//latest fiddle
http://jsfiddle.net/Qh9X5/10152/
The next step is to plot a line to bounce off the markers.
var slice = svg.select(".slices").selectAll("path.slice") .data(pie(data)); slice.enter() .insert("path") .attr('fill', function(d, i) { console.log("d", d); return colores_google(i); }) .attr("class", "slice"); slice .transition().duration(1000) .attrTween("d", function(d) { this._current = this._current || d; var interpolate = d3.interpolate(this._current, d); this._current = interpolate(0); return function(t) { return arc(interpolate(t)); }; }) slice.exit() .remove(); var placeholders = svg.select(".placeholders").selectAll("circle.placeholder") .data(pie(data)); placeholders.enter() .insert("circle") .style("fill", function(d) { return "white"; }) .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("r", "3") .attr("class", function(d) { return "placeholder " + d.data.group; }); placeholders .transition().duration(1000) placeholders.exit() .remove(); var gapplaceholders = svg.select(".placeholders").selectAll("circle.placeholder.gap"); gapplaceholders.remove(); 1 Answers
Answers 1
I've managed to start plotting multiple lines against the nodes of this doughnut chart.
http://jsfiddle.net/Qh9X5/10208/
var slice = svg.select(".slices").selectAll("path.slice") .data(pie(data)); slice.enter() .insert("path") .attr('fill', function(d, i) { return colores_google(i); }) .attr("class", "slice"); slice .transition().duration(1000) .attrTween("d", function(d) { this._current = this._current || d; var interpolate = d3.interpolate(this._current, d); this._current = interpolate(0); return function(t) { return arc(interpolate(t)); }; }) slice.exit() .remove(); var placeholders = svg.select(".placeholders").selectAll("circle.placeholder") .data(pie(data)); placeholders.enter() .insert("circle") .style("fill", function(d) { return "white"; }) .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("x", function(d) { return arc.centroid(d)[0]; }) .attr("y", function(d) { return arc.centroid(d)[1]; }) .attr("r", "3") .attr("id", function(d) { return "p" + d.data.id; }) .attr("class", function(d) { return "placeholder " + d.data.group; }); placeholders .transition().duration(1000) placeholders.exit() .remove(); var labelholders = svg.select(".labelholders").selectAll("text.labelholder") .data(pie(data)); labelholders.enter() .insert("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", -5) .text(function(d) { return d.data.id; }) .attr("class", function(d) { return "labelholder " + d.data.group; }); labelholders .transition().duration(1000) labelholders.exit() .remove(); var gapplaceholders = svg.select(".placeholders").selectAll("circle.placeholder.gap"); gapplaceholders.remove(); var lineColors = ["e2d7c7", "d7b093", "c04830", "fffcef", "4aaba2", "c94f42", "52b0a2" ]; var lineData = [{ group: 1, plots: [21, 22, 18, 1] }, { group: 2, plots: [20, 23, 17, 9] }, { group: 3, plots: [21, 24, 16, 15] }, { group: 3, plots: [19, 23, 16, 0] }, { group: 5, plots: [19, 24, 18, 6] }, { group: 6, plots: [19, 24, 17, 14] }, { group: 3, plots: [20, 23, 16, 2] }, { group: 5, plots: [19, 23, 16, 4] } ] $.each(lineData, function(index, value) { var coords = []; var group = value.group; $.each(value.plots, function(i, v) { $("#p" + v).each(function() { var x = $(this).attr("x"); var y = $(this).attr("y"); var obj = { "x": x, "y": y }; coords.push(obj); }); }); var first = { "x": 5 * index, "y": radius - 35 }; coords.push(first); var first = { "x": 5 * index, "y": radius + 200 }; coords.push(first); var maxLeng = coords.length - 2; $.each(coords, function(i, v) { var line = svg.append("line") .style("stroke", function(d) { return lineColors[group]; }) .attr("x1", coords[i]["x"]) .attr("y1", coords[i]["y"]) .attr("x2", coords[i + 1]["x"]) .attr("y2", coords[i + 1]["y"]); if (i == maxLeng) { return false; } }); }); 
0 comments:
Post a Comment