【D3.js】多角形Brushプラグイン
D3.jsのbrash機能では長方形での選択しかできませんが、polybrushプラグインを使うと多角形(ポリゴン)での選択が可能となります。
公式のサンプルではボロノイ描画などが含まれているので、もっとシンプルにサークルを選択するだけの例題を作成しました。
サンプル
d3.jsとともにpolybrush.jsを読み込んでください。
|
1 2 |
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> <script type="text/javascript" src="polybrush.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
var w = 960; var h = 500; //svg要素設置 var svg = d3.select("#chart") .append("svg:svg") .attr("width", w) .attr("height", h); //データセット作成 var dataSet = d3.range(200).map(function(d) { return {x:Math.random() * 1000, y:Math.random() * 1000}; }); //スケール初期化 var xScale = d3.scale.linear().domain([0, 1000]).range([0, w]); var yScale = d3.scale.linear().domain([0, 1000]).range([0, h]); //brash初期化 var brush = d3.svg.polybrush() .x(d3.scale.linear().range([0, w])) .y(d3.scale.linear().range([0, h])) .on("brushstart", function() { svg.selectAll(".selected").classed("selected", false); }) .on("brush", function() { //ポイントがbrush選択範囲内に存在していたらselectedクラスを付加する svg.selectAll(".point").classed("selected", function(d) { if ( brush.isWithinExtent(xScale(d.x), yScale(d.y)) ) { console.log("hit", d.x+":"+d.y); return true; } else { return false; } }); }); //brush設置 svg.append("svg:g") .attr("class", "brush") .call(brush); //ポイント(circle)設置 var points = svg.append("svg:g").attr("id", "points"); points.selectAll("circle") .data(dataSet) .enter() .append("svg:circle") .attr("class", "point") .attr("id", function(d, i) { return "point-"+i; }) .attr("transform", function(d) { return "translate(" + [xScale(d.x), yScale(d.y)] + ")"; }) .attr("r", 4) .attr('stroke', 'none'); |
