D3jsはパス `d`属性をデータにバインドします

debugcn 投稿 Dev

空

パスを動的に生成する適切な方法を見つけようとしています。私は、次のよDashingD3js'パターンD3jsとSVGパスを作成するために。

私の質問は、アクセサ関数の各インデックスをチェックして値を操作することとは別に、操作したい特定のポイントを表す変数を作成することとは別に、動的な線座標を指定する簡単な方法はありますか？

オブジェクトの配列にパスの座標があります。wとh値を使用して、座標を簡単にレスポンシブにすることができます。

var lineData = [ {'x': 100, 'y': 0 }, {'x': w/2, 'y': -150 }, {'x': w/2, 'y': 150}, {'x': 100, 'y': 0}];

次のようなアクセサ機能で座標を操作することができました。

var lineFunction = d3.svg.line()
        .x(function(d, i) {

            // function replacing lineData w/dynamic data

          } 
          return d.x 
        })
        .y(function(d) { return d.y })
        .interpolate('linear');

パスを参照する方法は次のとおりです。

myPath
    .attr('d', function() { return lineFunction(lineData); });

動的な線座標を指定する簡単な方法はありますか？

クールブルー

linedata配列内の値の一部が動的である場合、それらの値はそれを反映している必要があります。

例えば...

function f () {return w/2;}; //assuming w is updated asynchronously
var lineData = [ {'x': 100, 'y': 0 }, {'x': f, 'y': -150 }, {'x': f, 'y': 150}, {'x': 100, 'y': 0}];

次に、値の一部が関数であることをアクセサーに認識させる必要があります...

var lineFunction = d3.svg.line()
.x(function(d, i) {
    return typeof d.x === "function" ? d.x() : d.x;
  })
.y(function(d) { return d.y })
.interpolate('linear');

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]