如何使用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

你在这里有一个好的开始!为了使这更好,你需要三件事.用于选择组的UI组件,用于检测该组件中的改变的事件监听器,以及用于处理对可视化的更新的功能.

在我添加的代码中,我为d3生命周期的每个部分创建了三个新函数.输入将新元素附加到图表的句柄.更新根据绑定数据的更改更新现有值.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) {
	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()
	  .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>

Answer 2

这取决于您到底需要做什么，但您可以像我根据您的问题制作的以下代码片段那样做。我跳过了数据加载，但原理是一样的。

\n\n

创建后，您必须创建一个变量来保存创建的点，然后使用选择列表或其他内容来根据选择隐藏或显示点。

\n\n

\r\n

\r\n

// this variable will hold your created symbols\r\nvar points,\r\n    margin = {top: 20, right: 20, bottom: 30, left: 40},\r\n    width = 400 - margin.left - margin.right,\r\n    height = 300 - margin.top - margin.bottom;\r\n\r\nvar x = d3.scale.linear()\r\n.range([0, width]);\r\n\r\nvar y = d3.scale.linear()\r\n.range([height, 0]);\r\n\r\nvar select = d3.select(\'body\')\r\n    .append(\'div\')\r\n    .append(\'select\')\r\n    .on(\'change\', function(){\r\n      // get selected group\r\n      var group = select.property(\'value\');\r\n      // hide those points based on the selected value.\r\n      points.style(\'opacity\', function(d){\r\n        return d.group == group ? 1:0;\r\n      });\r\n    });\r\n\r\nvar svg = d3.select("body").append("svg")\r\n  .attr("width", width + margin.left + margin.right)\r\n  .attr("height", height + margin.top + margin.bottom)\r\n  .append("g")\r\n    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");\r\n\r\nvar data = [\r\n      {group:1, x:4.5, y:8},\r\n      {group:1, x:9, y:12},\r\n      {group:1, x:2, y:19},\r\n      {group:2, x:9, y:20},\r\n      {group:3, x:2, y:1},\r\n      {group:3, x:8, y:2}\r\n    ];\r\n\r\n// Coerce the strings to numbers.\r\ndata.forEach(function(d) {\r\n  d.x = +d.x;\r\n  d.y = +d.y;\r\n});\r\n\r\nvar groups = d3.set(data.map(function(d){ return d.group; })).values();\r\n\r\n// create group filtering select list\r\nselect.selectAll(\'option\')\r\n  .data(groups)\r\n  .enter().append(\'option\').text(function(d){ return d });\r\n\r\nselect.property(\'value\', groups[0]); // default selected group\r\n\r\n\r\n// Compute the scales\xe2\x80\x99 domains.\r\nx.domain(d3.extent(data, function(d) { return d.x; })).nice();\r\ny.domain(d3.extent(data, function(d) { return d.y; })).nice();\r\n\r\n// Add the x-axis.\r\nsvg.append("g")\r\n  .attr("class", "x axis")\r\n  .attr("transform", "translate(0," + height + ")")\r\n  .call(d3.svg.axis().scale(x).orient("bottom"));\r\n\r\n// Add the y-axis.\r\nsvg.append("g")\r\n  .attr("class", "y axis")\r\n  .call(d3.svg.axis().scale(y).orient("left"));\r\n\r\n// Add the points!\r\npoints = svg.selectAll(".point")\r\n  .data(data)\r\n  .enter().append("path")\r\n    .attr("class", "point")\r\n    .attr("d", d3.svg.symbol().type("triangle-up"))\r\n    .attr("transform", function(d){ \r\n      return "translate("+x(d.x)+","+y(d.y)+")";\r\n    })\r\n    // hide all points expect default group\r\n    .style(\'opacity\', function(d){ return d.group == groups[0]?1:0; });

\r\n

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

\r\n

\r\n

\r\n

\n