Bubbles Drilldown? about d3plus-react HOT 5 CLOSED

const methods = {
  depth: 0,
  groupBy: ["parent", "group", "name"],
  data: [
    {name: "DASH", group: "Privacy Coins", parent: "Currency", value: 1},
    {name: "BNT", group: "Stable Coins", parent: "Currency", value: 1},
    {name: "SMART", group: "Privacy Coins", parent: "Currency", value: 1},
    {name: "BTC", group: "Cryptocurrencies", parent: "Currency", value: 1},
    {name: "BCH",  group: "Cryptocurrencies", parent: "Currency", value: 1},
    {name: "GNO",  group: "Prediction", parent: "Communities", value: 1},
    {name: "REP",  group: "Prediction", parent: "Communities", value: 1}
  ],
  size: d => d.value
};

class App extends Component {

  render() {
    return (

      <div className="App">

      <Pack config={methods} />
      ...

var visualization = d3plus.viz()
 .container("#svgbody1")
 .data(sample_data)
 .type("bubbles")
 .id(["parent", "group", "name"])
 .size("default")
 .tooltip({
    "html": htmlContent,
    "sub": "description",
    "anchor": "middle middle",
    "fullscreen": true
    })
 .ui([
      {
        "method" : "size",
        "type": "drop",
        "value"  : [{"# Coins": "default"}, {"Market Cap": "usd"}, {"Market Volume": "vol"}]
      }
])
 .format({
 "text": function(text, params) {
if (text === "usd") {
 return "Market Cap";
 }
 else if (text === "default") {
 return "# Coins"; 
 } else if (text === "vol") {
 return "Volume"; 
 } {
 return d3plus.string.title(text, params);
 }
},

 "number": function(number, params) {
var formatted = d3plus.number.format(number, params);
if (params.key === "usd") {
 return "$" + formatted + " USD";
 } else if (params.key === "vol") {
 return "$" + formatted + " USD";
 }
 else {
 return formatted;
 }
}
 })
 .draw()