1

ここに示されているバイレベルのサンバースト/パーティションにラベルを追加しようとしています - http://bl.ocks.org/mbostock/5944371 :

ここに画像の説明を入力

最初の 2 つのレベルにラベルを追加し、正しく回転させました。しかし、移行中に新しいレベルのラベルを追加することはできません。始めるために、私は入れました...

text = text.data(partition.nodes(root).slice(1), function(d) { return d.key; });

直後...

path = path.data(partition.nodes(root).slice(1), function(d) { return d.key; });

行ですが、次のエラーがスローされます...

Uncaught TypeError: Cannot read property '__data__' of undefined

私は何を間違っていますか？

4

3 に答える 3

2

私はバイレベル パーティションを使用してマウスオーバーでラベルを追加しました。このバージョンでは (他のサンバースト パーティションとは異なり)、「パス」が定義および更新される 2 つの異なるセクションがあることがわかりました。最初はここにあります：

var path = svg.selectAll("パス")

次に、コードで強調表示したトランジションの下にもう一度: path.enter().append("path")

マウスオーバー ラベルを追加したとき、両方の場所でテキスト関数を参照する必要がありました。そうしないと、移行後に機能しません。

コードを JSFiddle または bl.ocks.org に投稿していただければ、試してみることができますが、最初はそこでつまずきました。

それが役立つことを願っています。

*注: コメントは投稿されませんでした: 申し訳ありませんが、これ以上お手伝いできませんが、私は D3 の初心者でもあります。これが私が得た場所です：

svg.selectAll("text") スニペットをコピーして、2 番目の "path.enter().append("path") スニペットの後に貼り付けます。これにより、後続のズームでも同様に表示されます。

私が見る問題：「g」要素がないため、テキストにも個別のトランジションが必要であるか、すべてが積み重なってしまいます。また、アークが現在存在する場所ではなく、元のパーティションの場所に配置されている理由がわかりません。

私のアプローチは、mouseOver にラベルを追加することでした。ここにアップロードしました：https://github.com/johnnymcnugget/d3-bilevelLabels

ここでは、「パス」スニペットの両方のセットで 2 つの関数を呼び出しており、遷移は「凡例」の単一変数内で処理されます。

于 2013-07-22T18:48:46.747 に答える
1

別の D3 初心者ですが、これを解決することができました。元のバイレベルパーティションから始めます。

  1. チャートが初めて描画されるテキストを追加します。
var path = svg.selectAll("path")
      .data(partition.nodes(root).slice(1))
    .enter().append("path")
      .attr("d", arc)
      .style("fill", function(d) { return d.fill; })
      .each(function(d) { this._current = updateArc(d); })
      .on("click", zoomIn);


var text = svg.selectAll("text")
      .data(partition.nodes(root).slice(1))
    .enter().append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .html(function(d) { return d.name; });
  1. ズームインまたはズームアウトするときにラベルを再描画する必要がある場合は、次を追加しますfunction zoom(root, p)
text.enter().append("text")
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
    .text(function(d) { return d.name; });

text.exit().transition()
    .style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
    .remove();
text.transition()
    .style("fill-opacity", 1)
    .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
    .attr("x", function(d) {return radius / 3 * d.depth; })
    .attr("dx", "6") // margin
    .attr("dy", ".35em") // vertical-align
  1. 最後にcomputeTextRotation関数を次のように変更します。
function computeTextRotation(d) {
  return (d.x + (d.dx)/2) * 180 / Math.PI - 90;
}

何も見逃していないことを願っています。

于 2014-10-31T13:26:52.290 に答える
0

実際、「2.」には変更された行が 1 行ありません。では、 の後に次function zoom(root, p)の行も追加する必要があります。path = path.data(partition ... .key; });

        path = path.data(partition.nodes(root).slice(1), function (d) {
            return d.key;
        });

        text = text.data(partition.nodes(root).slice(1), function (d) {
            return d.key;
        });
于 2016-06-27T20:18:38.907 に答える