Question

我正在寻找创建多个进度圈。（因此，从一个数据集中绘制3个圆圈）

我一直试图从this示例中进行调整，但正如您将看到的那样，我在某处发生了严重的错误。

我采取的第一步是将所有基准更改为数据，因为我希望选项能够动态处理数据。然后，我尝试简化代码，以便我更清楚/更容易理解。（我是d3新手！）

现在，我不确定发生了什么，希望有人可以帮我找到最终结果？

这是fiddle和我的代码;

/*global d3*/

var width = 240,
  height = 125,
  min = Math.min(width, height),
  oRadius = min / 2 * 0.8,
  iRadius = min / 2 * 0.85,
  color = d3.scale.category20();

var arc = d3.svg.arc()
  .outerRadius(oRadius)
  .innerRadius(iRadius);

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

var data = [
  [20],
  [40],
  [60]
];

// draw and append the container
var svg = d3.select("#chart").selectAll("svg")
  .data(data)
  .enter().append("svg")
  .attr("width", width).attr("height", height);
svg.append('g')
  .attr('transform', 'translate(75,62.5)')
  .append('text').attr('text-anchor', 'middle').text("asdasdasdas")


// enter data and draw pie chart
var path = svg.selectAll("path")
  .data(pie)
  .enter().append("path")
  .attr("class", "piechart")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc)
  .each(function(d) {
    this._current = d;
  })

function render() {
  // add transition to new path
  svg.selectAll("path")
  .data(pie)
  .transition()
  .duration(1000)
  .attrTween("d", arcTween)

  // add any new paths
  svg.selectAll("path")
    .data(pie)
    .enter().append("path")
    .attr("class", "piechart")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc)
    .each(function(d) {
      this._current = d;
    })

  // remove data not being used
  svg.selectAll("path")
    .data(pie).exit().remove();
}

render();


function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

全部谢谢！

Answer 1

您在绘制单独图表的位置时遇到问题。您需要做的就是为每个转换添加一个转换，以便它们位于容器的中心。

创建路径后添加：

.attr('transform', 'translate(' + width/2 + ',' +height/2 + ')')

width和height这里是容器尺寸，这会将每个图表移动到其容器的中心。

更新小提琴：http://jsfiddle.net/thatOneGuy/dbrehvtz/2/

显然，您可能知道，如果您想为每个饼图添加更多值，只需编辑数据即可。例如：

var data = [
  [20, 100, 100, 56, 23, 20, 100, 100, 56, 23 ],
  [40],
  [60]
];

新小提琴：http://jsfiddle.net/thatOneGuy/dbrehvtz/3/

创建多个进度圈d3.js

1 个答案: