// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }
data_set = [ {name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var force_g = d3.select("#content") .append("g") ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(function(d){return d.val/2;})) .force("y", d3.forceY().y(150)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) // 移動先のx座標 .force("y", d3.forceY(height/2).strength(0.05)) // 移動先のy座標 .force("collide", d3.forceCollide(50)) ;
// データセットのcol:移動先のx座標とします data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ;
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) // 移動先のx座標 .force("y", d3.forceY().y(150)) // 移動先のy座標 ;
data_set = [{name:"aaa", val:58, col:100}, {name:"bbb", val:88, col:200}, {name:"ccc", val:48, col:300}, {name:"ddd", val:73, col:400}, {name:"eee", val:81, col:500}, {name:"fff", val:31, col:600} ] ; var width=600, height=300; var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(5)) .force("collision", d3.forceCollide(40)) .force("x", d3.forceX().x(function(d){ return d.col; })) .force("y", d3.forceY().y(150)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var data_set = [ // 円の描画データ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; // svgの描画範囲 var width=600, height=300; // 複数の円を描画 var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// forceSimulationの作成 var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) ; // tickイベントリスナー function ticked(){ circles // 円を指定場所に移動させる .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; }
var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) // 円の描画範囲を広げる ;
var data_set = [ {name:"aaa", val:58}, {name:"bbb", val:88}, {name:"ccc", val:48}, {name:"ddd", val:73}, {name:"eee", val:81}, {name:"fff", val:31} ] ; var width=600, height=300; var force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("x", d3.forceX(width/2).strength(0.05)) .force("y", d3.forceY(height/2).strength(0.05)) .force("collide", d3.forceCollide(50)) ; function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; } var circles = d3.select("#content") .append("g") .selectAll("circle") .data(data_set) .enter() .append( "circle" ) .attr( "class", "text-circle" ) .attr("r", function(d){return d.val/2}) .attr("fill", "lightblue") ;
// オブジェクト:aaa、bbb data_set = [ {name:"aaa",fx:400,fy:200}, // fx/fyで配置場所に固定 {name:"bbb"} ] ; // オブジェクト:aaa、bbb の繋ぎリンクセット link_set = [ {source:"aaa", target:"bbb"} ];
var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) // 重ねる表示のため、リンクの距離はゼロにする .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) // 重ねる表示のため、両オブジェクトの衝突距離はゼロにする ;
// オブジェクト(aaa)をドロップ時の処理 function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; // オブジェクト(bbb)を取得 a.datum().fy=50; // 決まった範囲にxを再固定 a.datum().fx=400; // 決まった範囲にy再固定 }
data_set = [ {name:"aaa",fx:400,fy:200}, {name:"bbb"} ] ; link_set = [ {source:"aaa", target:"bbb"}, ]; var width=600, height=300; d3.select("#content") .append("rect") .attr("x",380) .attr("y",30) .attr("width", 40) .attr("height",40) .attr('fill', 'rgba(0,0,0,0)') .attr('stroke', 'red') ; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "none") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class",function(d){ return "circle-"+d.name }) .attr("r", 15) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(0) .strength(0.5)) .force('charge', d3.forceManyBody().strength(0.8)) .force("collision", d3.forceCollide(0)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; var a = d3.select(".circle-aaa") ; a.datum().fy=50; a.datum().fx=400; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }) ; }
// 描画するオブジェクトのデータセット data_set = [{name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; // オブジェクト間のリンク元とリンク先定義 link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ];
var line_force = d3.forceSimulation() .nodes( data_set ) // オブジェクトのデータセット .on("tick", ticked) .force("link", d3.forceLink(link_set) // リンク元とリンク先のデータセット .id(function(d){ return d.name ; }) // オブジェクトデータセットにあるリンク要素フィールド設定 .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) // オブジェクトのぶつけ合い距離 ;
function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links // svgのLineの始点/終点設定 .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; }); }
data_set = [ {name:"aaa"}, {name:"bbb"}, {name:"ccc"}, {name:"ddd"}, {name:"eee"}, {name:"fff"} ] ; link_set = [ {source:"aaa", target:"bbb"}, {source:"bbb", target:"ccc"}, {source:"ccc", target:"ddd"}, {source:"ddd", target:"eee"}, {source:"eee", target:"fff"}, {source:"fff", target:"aaa"}, ]; var width=600, height=300; var force_g = d3.select("#content").append("g") ; var links = force_g.selectAll(".link") .data(link_set) .enter() .append("line") .attr("class", "link") .attr("stroke", "#000") .attr("stroke-weight", 1) ; var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", 5) .attr("fill","lightblue") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ) ; var line_force = d3.forceSimulation() .nodes(data_set) .on("tick", ticked) .force("link", d3.forceLink(link_set) .id(function(d){ return d.name ; }) .distance(20) ) .force("center", d3.forceCenter(width/2, height/2)) .force('charge', d3.forceManyBody().strength(15)) .force("collision", d3.forceCollide(15)) ; function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.9).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; } function ticked(){ circles .attr("cx", function(d){ return d.x; }) .attr("cy", function(d){ return d.y; }) ; links .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; }); }
Event | Listening Element | Drag Event | Default Prevented? |
---|---|---|---|
mousedown⁵ | selection | start | no¹ |
mousemove² | window¹ | drag | yes |
mouseup² | window¹ | end | yes |
dragstart² | window | - | yes |
selectstart² | window | - | yes |
click³ | window | - | yes |
touchstart | selection | start | no⁴ |
touchmove | selection | drag | yes |
touchend | selection | end | no⁴ |
touchcancel | selection | end | no⁴ |
var circles = force_g.selectAll("circle") .data(data_set) .enter() .append("circle") .attr("class","test-circle") .attr("r", function(d){ return d.val/2; }) .attr("fill","lightblue") .call(d3.drag() // ドラッグイベントリスナーの実装 .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); ; // 三つのイベント(start, drag, end)リスナー実装 function dragstarted(d) { if (!d3.event.active) line_force.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) line_force.alphaTarget(0); d.fx = null; d.fy = null; }