D3.jsでデータをフィルタリングする方法は？

Question

私はすべてオンラインで検索してきましたが、私が探しているものは本当に見つかりません。おそらく私は正しい用語を使用していないと思います。

D3.jsには単純な散布図があります。私のCSVファイルは次のようなものです：

Group, X, Y 

1, 4.5, 8 
1, 9, 12 
1, 2, 19 
2, 9, 20 
3, 2, 1 
3, 8, 2 

私はグループでフィルタしたいです。だから、グラフは、デフォルトではグループ1の値のみが表示されますが、あなたはまた、ここではグループ2の値またはグループ3.

を見るために選択することができ、私は既に持っているいくつかのコードは...

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.linear() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.csv("l2data.csv", function(error, data) { 
    if (error) throw error; 

    // Coerce the strings to numbers. 
    data.forEach(function(d) { 
    d.x = +d.x; 
    d.y = +d.y; 
    }); 

    // Compute the scales’ domains. 
    x.domain(d3.extent(data, function(d) { return d.x; })).nice(); 
    y.domain(d3.extent(data, function(d) { return d.y; })).nice(); 

    // Add the x-axis. 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.svg.axis().scale(x).orient("bottom")); 

    // Add the y-axis. 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(d3.svg.axis().scale(y).orient("left")); 

    // Add the points! 
    svg.selectAll(".point") 
     .data(data) 
    .enter().append("path") 
     .attr("class", "point") 
     .attr("d", d3.svg.symbol().type("triangle-up")) 
     .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); 
}); 

です

Answer 1

これは正確に何をする必要があるかによって異なりますが、あなたの問題に基づいて作成した次のスニペットのようにすることができます。私はデータの読み込みをスキップしましたが、原則は同じです。

作成したポイントを保持する変数を作成してから、選択リストを使用するか、選択に基づいてポイントを表示または非表示にする必要があります。

// this variable will hold your created symbols 
 
var points, 
 
    margin = {top: 20, right: 20, bottom: 30, left: 40}, 
 
    width = 400 - margin.left - margin.right, 
 
    height = 300 - margin.top - margin.bottom; 
 

 
var x = d3.scale.linear() 
 
.range([0, width]); 
 

 
var y = d3.scale.linear() 
 
.range([height, 0]); 
 

 
var select = d3.select('body') 
 
    .append('div') 
 
    .append('select') 
 
    .on('change', function(){ 
 
     // get selected group 
 
     var group = select.property('value'); 
 
     // hide those points based on the selected value. 
 
     points.style('opacity', function(d){ 
 
     return d.group == group ? 1:0; 
 
     }); 
 
    }); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var data = [ 
 
     {group:1, x:4.5, y:8}, 
 
     {group:1, x:9, y:12}, 
 
     {group:1, x:2, y:19}, 
 
     {group:2, x:9, y:20}, 
 
     {group:3, x:2, y:1}, 
 
     {group:3, x:8, y:2} 
 
    ]; 
 

 
// Coerce the strings to numbers. 
 
data.forEach(function(d) { 
 
    d.x = +d.x; 
 
    d.y = +d.y; 
 
}); 
 

 
var groups = d3.set(data.map(function(d){ return d.group; })).values(); 
 

 
// create group filtering select list 
 
select.selectAll('option') 
 
    .data(groups) 
 
    .enter().append('option').text(function(d){ return d }); 
 

 
select.property('value', groups[0]); // default selected group 
 

 

 
// Compute the scales’ domains. 
 
x.domain(d3.extent(data, function(d) { return d.x; })).nice(); 
 
y.domain(d3.extent(data, function(d) { return d.y; })).nice(); 
 

 
// Add the x-axis. 
 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.svg.axis().scale(x).orient("bottom")); 
 

 
// Add the y-axis. 
 
svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(d3.svg.axis().scale(y).orient("left")); 
 

 
// Add the points! 
 
points = svg.selectAll(".point") 
 
    .data(data) 
 
    .enter().append("path") 
 
    .attr("class", "point") 
 
    .attr("d", d3.svg.symbol().type("triangle-up")) 
 
    .attr("transform", function(d){ 
 
     return "translate("+x(d.x)+","+y(d.y)+")"; 
 
    }) 
 
    // hide all points expect default group 
 
    .style('opacity', function(d){ return d.group == groups[0]?1:0; });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>

Answer 2

あなたはここで良いスタートを持っています！これをさらに良くするには、3つのことが必要です。グループを選択するためのUIコンポーネント、このコンポーネントの変更を検出するイベントリスナー、およびビジュアライゼーションの更新を処理する機能。

私が追加したコードでは、d3ライフサイクルの各部分で3つの新しい関数を作成しました。新しい要素をグラフに追加するハンドルを入力します。更新は、バインドされたデータの変更に基づいて既存の値を更新します。 Exitは、データがもはやバインドされていない要素をすべて削除します。詳細については、そのリンクのMike Bostockの古本「https://bost.ocks.org/mike/join/」をお読みください。これにより、チャートへのクールなトランジションを追加する柔軟性と、データの入力と終了の方法をカスタマイズすることができます。

var data = [{ group: 1, x: 5.5, y: 0 }, { group: 1, x: 0, y: 6 }, { group: 1, x: 7.5, y: 8 }, { group: 2, x: 4.5, y: 4 }, { group: 2, x: 4.5, y: 2 }, { group: 3, x: 4, y: 4 }]; 
 

 
var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
 
    width = 960 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var x = d3.scale.linear() 
 
    .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 
    
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    
 
// Coerce the strings to numbers. 
 
data.forEach(function(d) { 
 
    d.x = +d.x; 
 
    d.y = +d.y; 
 
}); 
 

 
// Compute the scales’ domains. 
 
x.domain(d3.extent(data, function(d) { return d.x; })).nice(); 
 
y.domain(d3.extent(data, function(d) { return d.y; })).nice(); 
 

 

 
// Add the x-axis. 
 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.svg.axis().scale(x).orient("bottom")); 
 

 
// Add the y-axis. 
 
svg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(d3.svg.axis().scale(y).orient("left")); 
 

 
// Get a subset of the data based on the group 
 
function getFilteredData(data, group) { 
 
\t return data.filter(function(point) { return point.group === parseInt(group); }); 
 
} 
 

 
// Helper function to add new points to our data 
 
function enterPoints(data) { 
 
    // Add the points! 
 
    svg.selectAll(".point") 
 
    .data(data) 
 
    .enter().append("path") 
 
    .attr("class", "point") 
 
    .attr('fill', 'red') 
 
    .attr("d", d3.svg.symbol().type("triangle-up")) 
 
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); 
 
} 
 

 
function exitPoints(data) { 
 
    svg.selectAll(".point") 
 
     .data(data) 
 
     .exit() 
 
     .remove(); 
 
} 
 

 
function updatePoints(data) { 
 
    svg.selectAll(".point") 
 
     .data(data) 
 
     .transition() 
 
\t .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); 
 
} 
 

 
// New select element for allowing the user to select a group! 
 
var $groupSelector = document.querySelector('.group-select'); 
 
var groupData = getFilteredData(data, $groupSelector.value); 
 

 
// Enter initial points filtered by default select value set in HTML 
 
enterPoints(groupData); 
 

 
$groupSelector.onchange = function(e) { 
 
    var group = e.target.value; 
 
    var groupData = getFilteredData(data, group); 
 

 
    updatePoints(groupData); 
 
    enterPoints(groupData); 
 
    exitPoints(groupData); 
 

 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<label> 
 
    Group 
 
    <select class="group-select"> 
 
    <option value=1 selected>1</option> 
 
    <option value=2>2</option> 
 
    <option value=3>3</option> 
 
    </select> 
 
</label>