Javascript 酒窝js交互式图例-加载时隐藏少量图例项

我正在做一些类似的工作

此可视化显示加载时图例中的所有项目。我想做的是，当可视化加载时，图例中只有少数项目被选中，并且在图表上也可见，例如：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);
      });

替换此项：

    // 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();

var filterValues=[]；
var shapes=myLegend.shapes[0]；
//默认情况下，只有三个所有者出现，其余所有者消失。
对于（var i=0；i

替换此：

    // 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();

var filterValues=[]；
var shapes=myLegend.shapes[0]；
//默认情况下，只有三个所有者出现，其余所有者消失。
对于（var i=0；i