堆棧內存溢出
  簡體   English   中英

d3線/圓圖

[英]d3 line/circle chart

 原文  2017-03-29 07:39:38  2   2    javascript/ d3.js

問題描述

有誰知道如何使用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();

2 個解決方案

解決方案1
 3  2017-04-07 19:06:55

我設法開始針對此甜甜圈圖的節點繪制多條線。

在此處輸入圖片說明 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;
      }
    });

  });

解決方案2
 0 已采納  

最新的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;
      }
    });

  });
};

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在D3中創建圓圖？ 如何將帶有工具提示的圓添加到d3圖表 在D3圖表中的圓圈內插入文本 d3多圈系列數據圖 在D3圖表中，“點擊時”無法按預期方式在圓上運行 D3折線圖不清晰 D3中折線圖的過渡 D3堆棧折線圖 D3折線圖轉換為bindPopup 在d3中創建折線圖
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM