Question

我正在尝试根据多个输入范围滑块创建d3js圆环图。

目前我有其他人工作的东西 - this：

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

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

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

这有点接近from this，但我还需要使用范围滑块更新细分。
提前致谢

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

用范围滑块的用户输入生成D3js甜甜圈图

0 个答案: