Диаграмма d / line / circle

Кто-нибудь знает, как создать диаграмму линии / круга, которая имеет линии, расширенные для разных квадрантов, которые представляют разные точки данных, используя JavaScript SVG?

На изображении ниже показано, что я ищу.

Введите описание изображения здесь

Начато путем отображения диаграммы dougnut с заполнителями, где строки (ы) могут быть рикошетом.

// последняя скрипка

http://jsfiddle.net/Qh9X5/10152/

Следующим шагом будет построение линии для отскока от маркеров.

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(); 

  • Как отображать изображение ТОЛЬКО в мобильном режиме, используя медиа-запросы?
  • Как правильно использовать директиву ng-cloak?
  • Как слушать изменения элемента заголовка?
  • Как получить базовый url с jquery или javascript?
  • Заменить сразу несколько строк
  • Выберите строку из таблицы html и отправьте значения onclick кнопки
  • Trick, чтобы получить Qt QWebView Bridge, доступный из WebKit IFRAME (локальные страницы)
  • Предотвращение поведения якоря
  • 2 Solutions collect form web for “Диаграмма d / line / circle”

    Последний jsfiddle.

    http://jsfiddle.net/Qh9X5/10276/

    Диаграмма теперь отвечает на гуманистические данные – хотя требует дальнейшего рассмотрения при корректировке базовых углов для группировки строк ниже в нижнем промежутке.

    BaseX2Angle = 0,5

     var svg = d3.select("#pies") .append("svg") .append("g") svg.append("g") .attr("class", "slices"); svg.append("g") .attr("class", "placeholders"); svg.append("g") .attr("class", "gapplaceholders"); svg.append("g") .attr("class", "labelholders"); var width = 560, 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.85) .innerRadius(radius * 0.83); var outerArc = d3.svg.arc() .innerRadius(radius * 0.9) .outerRadius(radius * 0.9); svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ") rotate(7)"); var key = function(d) { return d.data.label; }; function colores_google(n) { var colores_g = ["#e9168a", "#f8dd2f", "#448875", "#c3bd75", "#2b2d39", "#311854", "#553814", "#f7b363", "#89191d", "#c12f34", "#2b2a2c", "#c5b8a6", "#57585b"]; return colores_g[n % colores_g.length]; } var data = [ /* { "group": "g1", "set": [ "skill1", "skill2", "skill3", "skill4", "skill5", "skill6", "skill7", "skill8", "skill9", "skill10", "skill11", "skill12", "skill13", "skill14", "skill15", "skill16", "skill17", "skill18", "skill19", "skill20", "skill21", "skill22", "skill23", "skill24", "skill25", "skill26", "skill27", "skill28", "skill29", "skill30", "skill31", "skill32", "skill33", "skill34", "skill35", "skill36", "skill37", "skill38", "skill39", "skill40", "skill41", "skill42", "skill43", "skill44", "skill45", "skill46" ] }, */ /* { "group": "g2", "set": [ "<5secs", "<1min", "<1hour", "<1day" ] }, */ { "group": "g3", "set": [ "unsure, unanserablem impossible", "philiosophical, optimistic, vague, open", "measurable, mathmatical, logical", "clever, funny, sarcastic" ] }, { "group": "g4", "set": [ "Facebook", "Email", "Twitter", "Telephone", "Linkedin" ] }]; var id = 0; var d = []; var totalDataSpread = 0; $.each(data, function(index, value) { totalDataSpread += value.set.length; }); console.log("totalDataSpread", totalDataSpread); $.each(data, function(index, value) { var segmentTotal = value.set.length; $.each(value.set, function(i, v) { d.push({ group: value.group, label: v, id: id++, value: 1 // ((segmentTotal/totalDataSpread)*10) }); }); var gapSize = 10; if (segmentTotal > 10) { gapSize = 20; } //console.log("create GAP", value.set); d.push({ group: "gap", label: "gap " + id, id: -1, value: gapSize }); }); console.log("d", d); data = d; var lineColors = ["e2d7c7", "d7b093", "c04830", "fffcef", "4aaba2", "c94f42", "52b0a2" ]; var lineData = [{ group: 1, plotSets: [ "skill1", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 1, plotSets: [ "skill2", "<1min", "unsure, unanserablem impossible", "Facebook" ] }, { group: 4, plotSets: [ "skill3", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 3, plotSets: [ "skill4", "<5secs", "unsure, unanserablem impossible", "Email" ] }, { group: 3, plotSets: [ "skill5", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill6", "<5secs", "unsure, unanserablem impossible", "Email" ] }, { group: 3, plotSets: [ "skill7", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 3, plotSets: [ "skill8", "<5secs", "unsure, unanserablem impossible", "Twitter" ] }, { group: 4, plotSets: [ "skill9", "<1day", "clever, funny, sarcastic", "Telephone" ] }, { group: 3, plotSets: [ "skill10", "<5secs", "unsure, unanserablem impossible", "Twitter" ] }, { group: 2, plotSets: [ "skill11", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill12", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill13", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill14", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill15", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill16", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill17", "<1hour", "unsure, unanserablem impossible", "Email" ] }, { group: 4, plotSets: [ "skill18", "<1day", "unsure, unanserablem impossible", "Facebook" ] }, { group: 4, plotSets: [ "skill19", "<5secs", "clever, funny, sarcastic", "Telephone" ] }, { group: 3, plotSets: [ "skill20", "<5secs", "unsure, unanserablem impossible", "Linkedin" ] }, { group: 4, plotSets: [ "skill21", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 3, plotSets: [ "skill22", "<1hour", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill23", "<1hour", "unsure, unanserablem impossible", "Twitter" ] }, { group: 3, plotSets: [ "skill24", "<5secs", "unsure, unanserablem impossible", "Linkedin" ] }, { group: 4, plotSets: [ "skill25", "<1day", "unsure, unanserablem impossible", "Email" ] }, { group: 4, plotSets: [ "skill26", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill27", "<5secs", "unsure, unanserablem impossible", "Facebook" ] }, { group: 4, plotSets: [ "skill28", "<5secs", "unsure, unanserablem impossible", "Facebook" ] }, { group: 3, plotSets: [ "skill29", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 3, plotSets: [ "skill30", "<5secs", "unsure, unanserablem impossible", "Linkedin" ] }, { group: 3, plotSets: [ "skill31", "<1day", "clever, funny, sarcastic", "Telephone" ] }, { group: 3, plotSets: [ "skill32", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill33", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill34", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 2, plotSets: [ "skill35", "<5secs", "unsure, unanserablem impossible", "Twitter" ] }, { group: 1, plotSets: [ "skill36", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill37", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill38", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill39", "<1day", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill40", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill41", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 2, plotSets: [ "skill42", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 4, plotSets: [ "skill43", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 2, plotSets: [ "skill44", "<5secs", "unsure, unanserablem impossible", "Telephone" ] }, { group: 2, plotSets: [ "skill45", "<5secs", "clever, funny, sarcastic", "Twitter" ] }]; //add gaps change(data); function change(data) { 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("data-set", function(d) { return d.data.label; }) .attr("r", "5") .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(); /*removing mid arcs on gaps*/ var gapplaceholders = svg.select(".placeholders").selectAll("circle.placeholder.gap"); gapplaceholders.remove(); /*removing mid arcs on gaps*/ 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.label; //d.data.id; }) .attr("class", function(d) { return "labelholder " + d.data.group; }); labelholders .transition().duration(1000) labelholders.exit() .remove(); //gap place holder circles var gapplaceholders = svg.select(".gapplaceholders"); var arcradius = radius * 0.85; var circleradius = 1.5; var lineCount = lineData.length; // Approx number of circles we can fit around the circumference var n = (Math.PI * 2 * arcradius) / (2 * circleradius); var baseX2Angle = 0.5; var gapcoords = []; for (var i = 0; i < lineCount; i++) { var ang = ((Math.PI * 2 * i) / n) - baseX2Angle; var cx = arcradius * Math.sin(ang); var cy = arcradius * Math.cos(ang); gapplaceholders.append("circle") .attr('cx', cx) .attr('cy', cy) .attr('class', "gapcircles") .attr('r', circleradius); gapcoords.push({ "x": cx, "y": cy }); } //gap place holder circles $.each(lineData, function(index, value) { var coords = []; var group = value.group; $.each(value.plotSets, function(i, v) { $('[data-set="' + v + '"]').each(function() { var x = $(this).attr("x"); var y = $(this).attr("y"); coords.push({ "x": x, "y": y }); }); }); //console.log("coords", coords); var baseX = 60; coords.push({ "x": gapcoords[index].x, "y": gapcoords[index].y }); coords.push({ "x": (3 * index) - baseX, "y": radius + 200 }); var maxLeng = coords.length - 2; var linebatch = svg.append("g") .attr("class", "linebatch") $.each(coords, function(i, v) { var line = linebatch.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; } }); }); }; 

    Мне удалось начать рисовать несколько строк против узлов этой диаграммы пончиков.

    Введите описание изображения здесь 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; } }); }); 
    JavaScript делает сайт умным, красочным и простым использованием.