使用d3.js显示和隐藏数据可视化

Question

我需要使用d3.js进行以下可视化，因为我是d3的新手，我在这方面面临很多问题。

我有一列我有数据集的类别：

var dataset=[
          {label: name1,
          value: 5,
          },
          {label: subname1,
          value: 2,
          },
          {label: sub1,
          value: 1,
          },
          {label: sub2,
          value: 2,
          },
          {label: subname2,
          value: 1,
          },
          {label: sub3,
          value: 1,
          },
          {label: subname3,
           value: 1,
          },
          {label: sub4,
           value: 1,
          },
          {label: subname4,
          value: 1,
          },
          {label: sub5,
          value: 1,
          },
          {label: sub6,
           value: 1,
          },
          {label: subname5,
          value: 1,
          }
     ]

贡献来自值，名称来自标签，只有当我点击名称类别和＆＃34; sub＆＃34;时，子名称列应该是可见的。仅当我单击子名称类别时，类别才可见。

同样地，只有当我点击相应的类别时，才会出现贡献。

Jsfiddle代码here。