D3.js 将我的数据集添加到圆图_D3.js

D3.js 将我的数据集添加到圆图

d3.js

D3.js 将我的数据集添加到圆图,d3.js,D3.js,这是一个d3.js圆图。我被它的随机数数据集困住了。我想添加我的数据集，以便根据我的数据集创建圆或图 <!DOCTYPE html> <meta charset="utf-8"> <style> path { pointer-events: all; fill: none; stroke: #666; stroke-opacity: 0.2; } .active circle { stroke: #000; stroke-width

这是一个d3.js圆图。我被它的随机数数据集困住了。我想添加我的数据集，以便根据我的数据集创建圆或图

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  pointer-events: all;
  fill: none;
  stroke: #666;
  stroke-opacity: 0.2;
}

.active circle {
  stroke: #000;
  stroke-width: 2px;
}

</style>
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;

var circles = d3.range(20).map(function() {
  return {
    x: Math.round(Math.random() * (width - radius * 2) + radius),
    y: Math.round(Math.random() * (height - radius * 2) + radius)
  };
});

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory20);

var voronoi = d3.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .extent([[-1, -1], [width + 1, height + 1]]);

var circle = svg.selectAll("g")
  .data(circles)
  .enter().append("g")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

var cell = circle.append("path")
  .data(voronoi.polygons(circles))
    .attr("d", renderCell)
    .attr("id", function(d, i) { return "cell-" + i; });

circle.append("clipPath")
    .attr("id", function(d, i) { return "clip-" + i; })
  .append("use")
    .attr("xlink:href", function(d, i) { return "#cell-" + i; });

circle.append("circle")
    .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", radius)
    .style("fill", function(d, i) { return color(i); });

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
  d3.select(this).select("circle").attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
  cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);
}

function dragended(d, i) {
  d3.select(this).classed("active", false);
}

function renderCell(d) {
  return d == null ? null : "M" + d.join("L") + "Z";
}

</script>


路径{
指针事件：全部；
填充：无；
行程：#666；
笔划不透明度：0.2；
}
.活动圈{
行程：#000；
笔画宽度：2px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
半径=32；
var circles=d3.range（20.map）（函数（）{
返回{
x:Math.round（Math.random（）*（宽度-半径*2）+半径），
y:Math.round（Math.random（）*（高度-半径*2）+半径）
};
});
var color=d3.scaleOrdinal（）
.范围（d3.SchemeCategory 20）；
var voronoi=d3.voronoi（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.范围（[-1，-1]，[宽度+1，高度+1]]；
var circle=svg.selectAll（“g”）
.数据（圆圈）
.enter（）.append（“g”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
var cell=circle.append（“路径”）
.数据（voronoi.多边形（圆））
.attr（“d”，renderCell）
.attr（“id”，函数（d，i）{return“cell-”+i；}）；
圈。追加（“clipPath”）
.attr（“id”，函数（d，i）{return“clip-”+i；}）
.append（“使用”）
.attr（“xlink:href”，函数（d，i）{return“#cell-”+i；}）；
圈。追加（“圈”）
.attr（“剪辑路径”，函数（d，i）{return”url（#clip-“+i+”）；}）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，半径）
.style（“fill”，函数（d，i）{返回颜色（i）；}）；
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
d3.选择（这个）。选择（“圆圈”）.attr（“cx”，d.x=d3.event.x）。attr（“cy”，d.y=d3.event.y）；
cell=cell.data（voronoi.polygons（circles））.attr（“d”，renderCell）；
}
函数Draged（d，i）{
d3.选择（此）.classed（“活动”，false）；
}
函数renderCell（d）{
返回d==null？null：“M”+d.join（“L”）+Z”；
}

我想添加我的数据，而不是一些随机数。我的数据集将是 var数据集=[5,25,84,69,45]

这应该行得通

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  pointer-events: all;
  fill: none;
  stroke: #666;
  stroke-opacity: 0.2;
}

.active circle {
  stroke: #000;
  stroke-width: 2px;
}

</style>
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;

// here you can specify your dataSet as long as it's an array of object with x and y value

var circles = [{x:190,y:80} , {x:50,y:150}];

var color = d3.scaleOrdinal()
    .range(d3.schemeCategory20);

var voronoi = d3.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .extent([[-1, -1], [width + 1, height + 1]]);

var circle = svg.selectAll("g")
  .data(circles)
  .enter().append("g")
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

var cell = circle.append("path")
  .data(voronoi.polygons(circles))
    .attr("d", renderCell)
    .attr("id", function(d, i) { return "cell-" + i; });

circle.append("clipPath")
    .attr("id", function(d, i) { return "clip-" + i; })
  .append("use")
    .attr("xlink:href", function(d, i) { return "#cell-" + i; });

circle.append("circle")
    .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", radius)
    .style("fill", function(d, i) { return color(i); });

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
  d3.select(this).select("circle").attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
  cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);
}

function dragended(d, i) {
  d3.select(this).classed("active", false);
}

function renderCell(d) {
  return d == null ? null : "M" + d.join("L") + "Z";
}

</script>


路径{
指针事件：全部；
填充：无；
行程：#666；
笔划不透明度：0.2；
}
.活动圈{
行程：#000；
笔画宽度：2px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
半径=32；
//在这里，您可以指定数据集，只要它是具有x和y值的对象数组
变量圆=[{x:190，y:80}，{x:50，y:150}]；
var color=d3.scaleOrdinal（）
.范围（d3.SchemeCategory 20）；
var voronoi=d3.voronoi（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.范围（[-1，-1]，[宽度+1，高度+1]]；
var circle=svg.selectAll（“g”）
.数据（圆圈）
.enter（）.append（“g”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
var cell=circle.append（“路径”）
.数据（voronoi.多边形（圆））
.attr（“d”，renderCell）
.attr（“id”，函数（d，i）{return“cell-”+i；}）；
圈。追加（“clipPath”）
.attr（“id”，函数（d，i）{return“clip-”+i；}）
.append（“使用”）
.attr（“xlink:href”，函数（d，i）{return“#cell-”+i；}）；
圈。追加（“圈”）
.attr（“剪辑路径”，函数（d，i）{return”url（#clip-“+i+”）；}）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，半径）
.style（“fill”，函数（d，i）{返回颜色（i）；}）；
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
d3.选择（这个）。选择（“圆圈”）.attr（“cx”，d.x=d3.event.x）。attr（“cy”，d.y=d3.event.y）；
cell=cell.data（voronoi.polygons（circles））.attr（“d”，renderCell）；
}
函数Draged（d，i）{
d3.选择（此）.classed（“活动”，false）；
}
函数renderCell（d）{
返回d==null？null：“M”+d.join（“L”）+Z”；
}

似乎您的数据需要一个x和y值，您可以用

var circles=[{x:190，y:80}，{x:50，y:150}]替换您的圆并且它将工作，var循环=[{x:190，y:80}，{x:50，y:150}]；我不知道我可以把这个值放在哪里，这样下面的图表就可以选择我提供的值。这里的问题是，我想得到圈根据我的数据我发布了一个aswer与数据集改变，看看，并添加一个评论，如果你需要更多的信息！