3

D3 を使用してラジアル ハブ アンド スポーク図( http://bl.ocks.org/3169420 )を作成しようとしています。円グラフの弧を使用して、コンテキスト ノードとの間の関係を表します。言い換えれば、ノードの関係の 360 度ビューを作成しようとしています。

ここに画像の説明を入力

上記の例では、「ノード 1」が中央にあります。関連するノード #8 ～ #18 のテキスト ノード名を取得して、ホイールの「外側」に配置することができません。そうするための最良の方法が何であるかを誰かが知っていますか？

私が使用しているコードは次のようになります...

    // Add node names to the arcs, translated to the arc centroid and rotated.
    arcs3.filter(function(d) {
      return d.endAngle - d.startAngle > .2; }).append("svg:text")
        .attr("dy", "5px")
        .attr("angle", function(d) { return angle(d); })
        .attr("text-anchor", function(d) { return angle(d) < 0 ? "start" : "end"; })
        .attr("transform", function(d) { //set text'ss origin to the centroid
           // Make sure to set these before calling arc.centroid
           d.innerRadius = (height/2); // Set Inner Coordinate
           d.outerRadius = (height/2); // Set Outer Coordinate
           return "translate(" + arc3.centroid(d) + ")rotate(" + angle(d) + ")";
         })
        .style("fill", "Black")
        .style("font", "normal 12px Arial")
        .text(function(d) { return d.data.name; });

    // Computes the angle of an arc, converting from radians to degrees.
    function angle(d) {
      var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
      return a > 90 ? a - 180 : a;
    }

問題は、ノード ラベルが配置されている場所の X 座標と Y 座標を評価する必要があることです。ただし、これらの X 値と Y 値を正しく検索/アクセスできないようです。

よろしくお願いいたします。

私のベスト、

フランク

4

1 に答える 1

3

これについて Ger Hobbelt に感謝します...要するに、角度関数をパラメータ化する必要があります。

    function angle(d, offset, threshold) {
      var a = (d.startAngle + d.endAngle) * 90 / Math.PI + offset;
      return a > threshold ? a - 180 : a;
    }

完全な答えは d3.js Google グループにあります: https://groups.google.com/forum/?fromgroups#!topic/d3-js/08KVfNmlhRo

私のベスト、

フランク

于 2012-07-25T15:34:59.537 に答える