D3（ノードとしてのテーブル）のカスタム指向記号

Question

独自のカスタムシンボルを使用して強制指示グラフを作成することはできますか？私はあなたが異なるシンボル（円、十字、ダイヤモンド、四角、三角形、三角形）のカップルを作ることができることを知っていますが、それらのどれも私の目的のために十分複雑です。以下は私が達成したいものの例です。基本的には、ノードを表として表現したいと思います。

編集：私はマイク・ボストックはhereの上に掲示フォース - 有向グラフの例を使用していた出発点として

。基本的には、サークルをテーブル、または他のカスタムシェイプに置き換えたいと思います。

var width = 1000; 
var height = 500; 
var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

var svg = d3.select('body').append('svg') 
    .attr('width', width) 
    .attr('height', height); 

d3.json('miserables.json', function(error, graph) { 
    if (error) { 
     throw error; 
    } 
    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll('.link') 
     .data(graph.links) 
     .enter().append('line') 
     .attr('class', 'link') 
     .style('stroke-width', function(d) { 
      return Math.sqrt(d.value); 
     }); 

    var node = svg.selectAll('.node') 
     .data(graph.nodes) 
     .enter().append('circle') 
     // <--- I should probably append my custom shape here instead of the circle 
     .attr('class', 'node') 
     .attr('r', 5) 
     .style('fill', function (d) { 
      return color(d.group); 
     }) 
     .call(force.drag); 

    node.append('title') 
     .text(function (d) { 
      return d.name; 
     }); 

    force.on('tick', function() { 
     link.attr('x1', function (d) { 
      return d.source.x; 
     }) 
      .attr('y1', function (d) { 
       return d.source.y; 
      }) 
      .attr('x2', function (d) { 
       return d.target.x; 
      }) 
      .attr('y2', function (d) { 
       return d.target.y; 
     }); 

     node.attr('cx', function (d) { 
       return d.x; 
     }) 
      .attr('cy', function (d) { 
      return d.y; 
     }); 
    }); 
}); 

EDIT 2：

テーブルと通常のノードを置き換えるために多くの試みの後、私は進歩の多くを行うことはまだないです。テーブルを作成してWebページに追加することはできますが、グラフの一部ではありません。私はテーブルをつかむことはできません。ここには作業Fiddleがあります。コードは以下のとおりです。

このフォームに間違った角度で近づいている必要があります。テーブルを作ることは私のニーズに合ったもののようです。私自身のSVG要素を作ることは、必要以上に複雑になるようです。

var cols = [ 
    'Col 1', 
    'Col 2' 
]; 

var vals = [ 
    ['val 1', 'val2'], 
    ['val 3', 'val 4'] 
]; 

var width = 800; 
var height = 500; 
var radius = 50; 
var color = d3.scale.category20(); 


//**************************************************// 
//*************** Tables as nodes ******************// 
//**************************************************// 

var arr = []; 
var table; 

for (var i = 0; i < 5; i += 1) { 
    table = d3.select('#canvas').append('table'); 
    var thead = table.append('thead'); 
    var tbody = table.append('tbody'); 
    thead.append('thead') 
     .append('tr') 
     .selectAll('th') 
     .data(cols).enter() 
     .append('th') 
     .text(function(col) { 
      return col; 
     }); 
    var rows = tbody.append('tbody').selectAll('tr') 
     .data(vals, function (d) { 
      return d; 
     }) 
     .enter() 
     .append('tr'); 
    var cells = rows.selectAll('td') 
     .data(function (d) { 
      return d; 
     }) 
     .enter().append('td') 
     .text(function (d) { 
      return d; 
     }); 
    arr.push(table); 
} 

var force = d3.layout.force() 
    .nodes(arr) 
    .links([]) 
    .size(width, height) 
    .linkDistance(80) 
    .charge(-200) 
    .start(); 

force.on('tick', function() { 
    table.style('top', function (d) { 
     console.log(d); 
     return d; 
    }); 
}); 


//**************************************************// 
//****************** Old graph *********************// 
//**************************************************// 

var dataset = { 
    nodes: [ 
     {name: "Adam"}, 
     {name: "Bob"}, 
     {name: "Carrie"}, 
     {name: "Donovan"}, 
     {name: "Edward"}, 
     {name: "Felicity"}, 
     {name: "George"}, 
     {name: "Hannah"}, 
     {name: "Iris"}, 
     {name: "Jerry"} 
    ], 
    edges: [ 
     {source: 0, target: 1}, 
     {source: 0, target: 2}, 
     {source: 0, target: 3}, 
     {source: 0, target: 4}, 
     {source: 1, target: 5}, 
     {source: 2, target: 5}, 
     {source: 2, target: 5}, 
     {source: 3, target: 4}, 
     {source: 5, target: 8}, 
     {source: 5, target: 9}, 
     {source: 6, target: 7}, 
     {source: 7, target: 8}, 
     {source: 8, target: 9}, 
     {source: 8, target: 9} 
    ] 
}; 


var force2 = d3.layout.force() 
    .charge(-3000) 
    .linkDistance(200) 
    .size([width, height]) 
    .nodes(dataset.nodes) 
    .links(dataset.edges) 
    .start() 


var svg = d3.select('body').append('svg') 
    .attr('width', width) 
    .attr('height', height); 

var edges = svg.selectAll('line') 
    .data(dataset.edges) 
    .enter() 
    .append('line') 
    .attr('id', function (d, i) { 
     return 'edge' + i; 
    }) 
    .style('stroke', '#ccc') 
    .style('pointer-events', 'none'); 

var nodes = svg.selectAll('.node') 
    .data(dataset.nodes) 
    .enter() 
    .append('circle') 
    .attr({ 
     class: 'node' 
    }) 
    .attr('r', radius) 
    .style('fill', function (d, i) { 
     return color(i); 
    }) 
    .call(force2.drag); 

force2.on('tick', function() { 
    edges.attr({ 
     'x1': function (d) { 
      return d.source.x; 
     }, 
     'y1': function (d) { 
      return d.source.y; 
     }, 
     'x2': function (d) { 
      return d.target.x; 
     }, 
     'y2': function (d) { 
      return d.target.y; 
     } 
    }); 
    nodes.attr({ 
     'cx': function (d) { 
      return d.x = Math.max(radius, Math.min(width - radius, d.x)); 
     }, 
     'cy': function (d) { 
      return d.y = Math.max(radius, Math.min(height - radius, d.y)); 
     } 
    }); 
}); 

Answer 1

SVGを使用すると、任意の複雑なノードできるものを整理するために使用することができますgroup要素を持っています。

また、にはにSVGを使用していません。 D3を使用して、HTML表要素の絶対位置を操作することができます。あなたの例では、tickはサークル要素のcxとcyプロパティを更新します。これは、絶対配置されたテーブル要素の上と下のプロパティを簡単に更新することができます。