データから特定のアイコンを構築する

Question

d3を使用して、異なるボックスに特定のアイコンを表示したいとします。二つのパラメータ（速度）

• x0は、Y0ボックスの最初のコーナーで、
• X1、Y1第2の角と
• VX、VY： 私は[x0, y0, x1, y1, vx, vy]の配列としてデータを持っています

SVGパスの生成に使用されます。私のボックスを生成する

var boxes = nodeSVGGroup.selectAll("rect").data(nodes).enter().append("rect"); 

をし、これがうまく

私はSVGパス（アイコン）を作成し、適切に（各ボックスでそれをレンダリングする際に私の問題が来る働いている：

私が使用していますそれは、生成された翻訳され、各ボックスの中心に合うように回転させることが必要である。

私は

var selection = nodeSVGGroup.selectAll(".barb").data(nodes); 

selection.enter() 
    .append('g') 
    .each(function(node, i) { 
    var vx = node[4]; 
    var vy = node[5]; 

    var speed = Math.sqrt(vx*vx + vy*vy); 
    var angle = Math.atan2(vx, vy); 

    // generate a path based on speed. it looks like 
    // M2 L8 2 M0 0 L1 2 Z 
    var path = ... 
    var scale = 0.5*(node[1]-node[0])/8; 

    var g = d3.select(this).data([path,angle,scale]).enter().append('g'); 

    // still need to add following transforms 
    // translate(' + node[2] + ', ' + node[3] + ') 
    // scale(' + scale + ') 
    // rotate(' + angle + ' ' + 0 + ' ' + 0 + ') 
    // translate(-8, -2)', 

    g.append('path').attr('d', function(d){console.log(d); return d[0];}) 
        .attr('vector-effect', 'non-scaling-stroke'); 
    }) 
    .attr('class', 'wind-arrow'); 

すなわち、同様のパターンを使用しています3210

私は私が間違って何をやっている

.each(function(node, i) { 

このラインに関連すると思わエラーUncaught TypeError: Cannot read property 'ownerDocument' of null(…)を取得しますか？

完全なコードを使用すると、each内部の「入力」の選択を作成しようとしている理由は完全には明らかではありませんhere

Answer 1

です。ここで

d3.select(this).append('path') 
    .attr('d', path) 

が更新フィドルです：https://jsfiddle.net/9x169eL1/