2

D3.js 円グラフにセグメントを追加できません。新しいデータを使用.enter()し.append()てステージングする必要があることはわかっていますが、アークをグループ化したときにそれを適用する方法がわかりません (ラベルに必要です)。

これが私の更新機能です：

var updateChart = function(dataset) {
  arcs.data(donut(dataset));
  arcs.transition()
    .duration(duration)
    .attrTween("d", arcTween);
  sliceLabel.data(donut(dataset));
  sliceLabel.transition()
    .duration(duration)
    .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
    .style("fill-opacity", function(d) {
      if (d.value === 0) { return 1e-6; }
      else { return 1; }
    });
};

初期グラフのセットアップ方法:

var arc = d3.svg.arc()
  .innerRadius(radius * .4)
  .outerRadius(radius);
var svg = d3.select("body")
  .append("svg")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var arc_grp = svg.append("g")
  .attr("class", "arcGrp")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
var label_group = svg.append("g")
  .attr("class", "lblGroup")
  .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");

var arcs = arc_grp.selectAll("path")
  .data(donut(data));
arcs.enter()
  .append("path")
  .attr("stroke", "white")
  .attr("stroke-width", 0.8)
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", arc)
  .each(function(d) { return this.current = d; });

var sliceLabel = label_group.selectAll("text")
  .data(donut(data));
sliceLabel.enter()
  .append("text")
  .attr("class", "arcLabel")
  .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
  .attr("text-anchor", "middle")
  .style("fill-opacity", function(d) {
    if (d.value === 0) { return 1e-6; }
    else { return 1; }
  })
  .text(function(d) { return d.data.label; });

完全な jsfiddle: http://jsfiddle.net/kPM5L/

新しいデータをチャートに追加するクリーンな方法は何ですか?

4

1 に答える 1

4

移行をスムーズに行うには、最初に使用しているコードを update 関数にも追加する必要があります。ここでjsfiddle を使用します。

そして、SOを幸せにするためのいくつかのコード-これは、更新機能にも必要なものです。

.enter()
.append("path")
.attr("stroke", "white")
.attr("stroke-width", 0.8)
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.each(function(d) { return this.current = d; });

.enter()
.append("text")
.attr("class", "arcLabel")
.attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; })
.attr("text-anchor", "middle")
.style("fill-opacity", function(d) {
  if (d.value === 0) { return 1e-6; }
  else { return 1; }
})
.text(function(d) { return d.data.label; });
于 2013-04-06T10:35:35.297 に答える