通过多维数据集条形图进行分类

Question

我正在尝试使用包含3个值集的数据集创建条形图。第一个值是条高度，第二个是条形宽度，第三个是不透明度。我现在的目标是能够使用点击在周期中按高度，宽度，不透明度进行排序。但是，我觉得第一次点击后我似乎会得到随机的结果。

我应该使用模量操作，因此我在点击功能之外设置了var s = -1，然后s =(s 1(％3。在排序功能中，我有返回 d3.ascending(a[s],b[s]);。

这是我单击和排序的代码。

var s = -1;
svg.on("click", function() {
    s = (s + 1)
    svg.selectAll("rect")
        .data(dataset)
        .sort(function(a, b) {
            return d3.ascending(a[s], b[s]);
        })
        .transition()
        .duration(500)
        .attr("x", function(d, i) {
            return xScale(i);
        })
});

我期望按高度，宽度，然后不透明度。我会在第一次点击时获得高度，但下一个点击似乎是随机的。

Answer 1

问题是这个看似无害的数据绑定：

svg.selectAll("rect")
    .data(dataset)// <----- here
    .sort(function(a, b) {
    //etc...

问题在于，您将数据附加到先前排序的矩形通过其索引。这搞砸了。

这是一个简单的解释。假设您有5个元素(在大量情况下(，对应于数据数组[d, a, e, c, b](在较低的情况下(，您想按字母顺序排序：

+------+------+------+------+------+
| D(d) | A(a) | E(e) | C(c) | B(b) | 
+------+------+------+------+------+

排序后，您有：

+------+------+------+------+------+
| A(a) | B(b) | C(c) | D(d) | E(e) | 
+------+------+------+------+------+

当您重新填充数据(请记住，按照该顺序，相同的[d, a, e, c, b]数组(已经排序元素时，您有：

+------+------+------+------+------+
| A(d) | B(a) | C(e) | D(c) | E(b) | 
+------+------+------+------+------+

如果您通过数据对此进行排序(这是selection.sort()所做的(，您将拥有：

+------+------+------+------+------+
| B(a) | E(b) | D(c) | A(d) | C(e) | 
+------+------+------+------+------+

正如您所说

有两种解决方案：

解决方案1：删除数据绑定

最简单的只是删除数据绑定，因为矩形已经具有数据。这是一个带有3个矩形的示例，例如每个矩形具有最大的高度，宽度或不透明度：

var data = [
  [45, 90, 0.5],
  [95, 10, 0.2],
  [15, 40, 0.9]
];
var xScale = d3.scaleOrdinal()
  .domain([0, 1, 2])
  .range([0, 100, 200]);
var svg = d3.select("svg");
var span = d3.select("span")
svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("width", d => d[1])
  .attr("height", d => d[0])
  .style("opacity", d => d[2])
  .attr("x", (_, i) => xScale(i));
var s = -1;
svg.on("click", function() {
  s = (s + 1);
  span.html(["height", "width", "opacity"][s % 3]);
  svg.selectAll("rect")
    .sort(function(a, b) {
      return d3.ascending(a[s % 3], b[s % 3]);
    })
    .transition()
    .duration(500)
    .attr("x", function(d, i) {
      return xScale(i);
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p>Sort by: <span></span></p>
<svg></svg>

解决方案2：使用密钥函数

第二个解决方案是使用键函数，因此您不通过其索引绑定数据，而是根据对每个矩形的唯一标识。

在我的虚拟数据中，每个高度值都是唯一的，所以我只是这样做：

.data(dataset, d=>d[0])

这是演示：

var data = [
  [45, 90, 0.5],
  [95, 10, 0.2],
  [15, 40, 0.9]
];
var xScale = d3.scaleOrdinal()
  .domain([0, 1, 2])
  .range([0, 100, 200]);
var svg = d3.select("svg");
var span = d3.select("span")
svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("width", d => d[1])
  .attr("height", d => d[0])
  .style("opacity", d => d[2])
  .attr("x", (_, i) => xScale(i));
var s = -1;
svg.on("click", function() {
  s = (s + 1);
  span.html(["height", "width", "opacity"][s % 3]);
  svg.selectAll("rect")
  	.data(data, d=>d[0])
    .sort(function(a, b) {
      return d3.ascending(a[s % 3], b[s % 3]);
    })
    .transition()
    .duration(500)
    .attr("x", function(d, i) {
      return xScale(i);
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p>Sort by: <span></span></p>
<svg></svg>