javascript - Dimple JS 交互式图例 - 在加载时隐藏一些图例项目

Question

我正在研究类似于 this 的东西。

此可视化显示加载时图例中的所有项目。我想做的是，当可视化加载时，图例中只检查了很少的项目，并且在图表上也可见，例如:Tyrell Corp、Stark Ind 和 Rekall。对于其余的人，我应该可以选择打开/使其可见。

这仅在加载时需要。之后，我希望图例能够像本示例中那样正常运行。

我认为这部分代码需要更改:

// Get a unique list of Owner values to use when filtering
    var filterValues = dimple.getUniqueValues(data, "Owner");
    // Get all the rectangles from our now orphaned legend
    myLegend.shapes.selectAll("rect")
      // Add a click event to each rectangle
      .on("click", function (e) {
        // This indicates whether the item is already visible or not
        var hide = false;
        var newFilters = [];
        // If the filters contain the clicked shape hide it
        filterValues.forEach(function (f) {
          if (f === e.aggField.slice(-1)[0]) {
            hide = true;
          } else {
            newFilters.push(f);
          }
        });
        // Hide the shape or show it
        if (hide) {
          d3.select(this).style("opacity", 0.2);
        } else {
          newFilters.push(e.aggField.slice(-1)[0]);
          d3.select(this).style("opacity", 0.8);
        }
        // Update the filters
        filterValues = newFilters;
        // Filter the data
        myChart.data = dimple.filterData(data, "Owner", filterValues);
        // Passing a duration parameter makes the chart animate. Without
        // it there is no transition
        myChart.draw(800);
      });

Answer 1

替换这个:

    // Get a unique list of Owner values to use when filtering
    var filterValues = dimple.getUniqueValues(data, "Owner");

这样:

var filterValues = [];
var shapes = myLegend.shapes[0];

//By default, have only three owners showing up and the rest faded. 
for (var i=0; i < shapes.length; i++)
{
  if (i < 3)
  {
    var filterValue = $("text", shapes[i]).text();
    filterValues.push(filterValue);
  }
  else
  {      
    var rect = $("rect", shapes[i]);
    rect.css("opacity", 0.2);      
  }
}

// Filter the data and redraw the chart to show only for three owners.
myChart.data = dimple.filterData(data, "Owner", filterValues);    
myChart.draw();