Javascript 使用范围滑块的用户输入生成D3js圆环图

我正在尝试创建一个基于大量输入范围滑块的d3js甜甜圈图

目前，我从其他人的作品中收集了一些东西-：

var宽度=500，
高度=宽度，
半径=数学最小值（宽度、高度）/2，
切片=5，
范围=d3.范围（切片），
颜色=d3.scale.category10（）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d；}）；
var arc=d3.svg.arc（）
.外部（半径）
.内半径（半径/1.6）；
//设置，然后为每个切片创建和。
变量路径=d3。选择（“svg”）
.attr（{width:width，height:height}）
.附加（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
.selectAll（“.arc”）
.数据（范围）
.输入（）
.附加（“g”）
.attr（{class:“arc”，style:#fff；“}）
.append（“路径”）
.style（“fill”，函数（d，i）{返回颜色（i）；}）；
//创建尽可能多的输入元素。
var输入=d3。选择（“表格”）
.selectAll（“.field”）
.数据（范围）
.输入（）
.附加（“div”）
.attr（“类”、“字段”）
.附加（“标签”）
.style（“背景”，函数（d）{return'#FFFFFF'；}）
.append（“输入”）
艾特先生({
类型：“范围”，
分:0,，
最高：4000，
价值：1，
步骤：1，
价值：500，
职业：“射程”，
id：函数（d，i）{返回“v”+i；}，
oninput:“更新（）”
});
//update（）将s设置为对应的饼图切片
//添加到滑块值。当页面加载并
//每次移动滑块时。
函数getTotal（）{
var合计=0；
d3.选择全部（'.range'）。每个（函数（）{
总计=总计+parseInt（此.value）；
});
返回总数；
}
函数showValues（）{
d3.选择全部（'.range'）。每个（函数（）{
var perct=this.value+'%'；
d3.select（this.parentNode.nextSibling）.html（perct）；
});
}
函数更新（）{
var data=range.map(
函数（i）{return document.getElementById（“v”+i.value}
);
路径.data（饼图（数据））.attr（“d”，弧）；
}
更新（）；

我需要发送每个输入的值和范围，理想的html标记，以及显示每个输入的值和标签

我已经看到了很多不同类型的d3js图，它们都接近于这一点，但我还没有看到真正将所有这些元素结合在一起的d3js图

这有点接近了，但我还需要使用范围滑块更新分段。
提前感谢

---

这是一个大问题，任何帮助都将不胜感激

您介意在blockbuilder.org发布代码吗？这使得调试和协作更容易实现一个有效的解决方案。我不明白你在问什么。您当前的工作似乎运行良好，您只想添加标签，显示每个切片上的值？您介意将代码发布到blockbuilder.org吗？这使得调试和协作更容易实现一个有效的解决方案。我不明白你在问什么。您当前的工作似乎运行良好，您只想添加显示每个切片上的值的标签吗？

var width = 500,
  height = width,
  radius = Math.min(width, height) / 2,
  slices = 5,
  range  = d3.range(slices),
  color  = d3.scale.category10();

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) { return d; });

var arc = d3.svg.arc()
  .outerRadius(radius)
  .innerRadius(radius/1.6);

// Set up the <svg>, then for each slice create a <g> and <path>.
var paths = d3.select("svg")
    .attr({ width: width, height: height })
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .selectAll(".arc")
    .data(range)
    .enter()
      .append("g")
        .attr({ class : "arc", style: "stroke: #fff;" })
      .append("path")
        .style("fill", function(d, i) { return color(i); });

// Create as many input elements as there are slices.
var inputs = d3.select("form")
  .selectAll(".field")
  .data(range)
  .enter()
    .append("div")
      .attr("class", "field")
    .append("label")
      .style("background", function (d) { return '#FFFFFF'; })
    .append("input")
    .attr({
      type  : "range",
      min   : 0,
      max   : 4000,
      value : 1,
      step  : 1,
      value : 500,
      class : "range",
      id    : function(d, i) { return "v" + i; },
      oninput : "update()"
    });

// update() sets the <path>s to the pie slices that correspond
// to the slider values. It is called when the page loads and
// every time a slider is moved.

function getTotal () {
    var total = 0;    
    d3.selectAll('.range').each(function () {
        total = total + parseInt(this.value);
    });
    return total;
}

function showValues () {
    d3.selectAll('.range').each(function () {
        var perct = this.value + '%';
        d3.select(this.parentNode.nextSibling).html(perct);
    });
}

function update () {
  var data = range.map(
    function(i) { return document.getElementById("v" + i).value }
  );

  paths.data(pie(data)).attr("d", arc);
}

update();