Question

我正在尝试用Travis Palmer修改笔（http://codepen.io/anon/pen/JgyCz），以便我可以在多个元素上使用它。我们正在尝试在页面上放置几个<div class="donut" data-donut="x">。

所以它看起来与下面的html类似：

////// HTML 

<div class="donut" data-donut="22"></div>

<div class="donut" data-donut="48"></div>

<div class="donut" data-donut="75></div>

我试图转换为可重用的compunent的D3.js / jQuery示例如下。（要查看完整的工作示例，请转到此链接 - http://codepen.io/anon/pen/JgyCz）

////// D3.js

var duration   = 500,
    transition = 200;

drawDonutChart(
  '.donut',
  $('.donut').data('donut'),
  290,
  290,
  ".35em"
);

function drawDonutChart(element, percent, width, height, text_y) {
  width = typeof width !== 'undefined' ? width : 290;
  height = typeof height !== 'undefined' ? height : 290;
  text_y = typeof text_y !== 'undefined' ? text_y : "-.10em";

  var dataset = {
        lower: calcPercent(0),
        upper: calcPercent(percent)
      },
      radius = Math.min(width, height) / 2,
      pie = d3.layout.pie().sort(null),
      format = d3.format(".0%");

  var arc = d3.svg.arc()
        .innerRadius(radius - 20)
        .outerRadius(radius);

  var svg = d3.select(element).append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var path = svg.selectAll("path")
        .data(pie(dataset.lower))
        .enter().append("path")
        .attr("class", function(d, i) { return "color" + i })
        .attr("d", arc)
        .each(function(d) { this._current = d; }); // store the initial values

  var text = svg.append("text")
        .attr("text-anchor", "middle")
        .attr("dy", text_y);

  if (typeof(percent) === "string") {
    text.text(percent);
  }
  else {
    var progress = 0;
    var timeout = setTimeout(function () {
      clearTimeout(timeout);
      path = path.data(pie(dataset.upper)); // update the data
      path.transition().duration(duration).attrTween("d", function (a) {
        // Store the displayed angles in _current.
        // Then, interpolate from _current to the new angles.
        // During the transition, _current is updated in-place by d3.interpolate.
        var i  = d3.interpolate(this._current, a);
        var i2 = d3.interpolate(progress, percent)
        this._current = i(0);
        return function(t) {
          text.text( format(i2(t) / 100) );
          return arc(i(t));
        };
      }); // redraw the arcs
    }, 200);
  }
};

function calcPercent(percent) {
  return [percent, 100-percent];
};

Answer 1

执行此操作的最佳方法是使用angular指令。角度指令基本上将html包装在自定义标记内，让你在多个页面上反复标记指令或多次在页面上标记。观看此视频：http://www.youtube.com/watch?v=aqHBLS_6gF8

还有一个名为nvd3.js的库，它包含可以重复使用的预构建角度指令：http://nvd3.org/

希望这有帮助。

Answer 2

好吧，我明白了。事后我觉得有点愚蠢，但我能说什么，我是一个js n00b。您所要做的就是再次调用drawDonutChart（）方法。简而言之：

drawDonutChart(
  '#donut1',
  $('#donut1').data('donut'),
  220,
  220,
  ".35em"
);

drawDonutChart(
  '#donut2',
  $('#donut2').data('donut'),
  120,
  120,
  ".35em"
);

drawDonutChart(
  '#donut3',
  $('#donut3').data('donut'),
  150,
  150,
  ".2em"
);

将静态代码转换为可重复使用的D3.js饼图动画

2 个答案: