D3.js при наведении курсора мыши должен отображать значение `State` графика

Question

Это мои данные json:

var data = [
  {
    "State": "My state 1",
    "Sum": 6,
    "field1": 3,
    "field2": 3
  },
  {
      "State": "My state 2",
    "Sum": 20,
    "field1": 12,
    "field2": 8
  }]

Это мой пример кода:

var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

                data.forEach(function(d) {
                    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
                });

                x0.domain(data.map(function(d) { return d.State; }));
                x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
                y.domain([0, d3.max(data, function (d) { 
                    return d3.max(d.ages, function (d) { 
                        return d.value; }); })]);



                svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);

                svg.append("g")
                      .attr("class", "y axis")
                      //.attr("class", "grid")
                      .call(yAxis)
                      .append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 6)
                      .attr("dy", ".71em")
                      .style("text-anchor", "end")
                      .text("");

                var tooltip = d3.select("body")
                    .append("div")
                    .style("position", "absolute")
                    .style("z-index", "10")
                    .style("visibility", "hidden")
                    .style("background", "white")
                    .style("text-align", "center")
                    .style("font-size", "15px")
                    .attr("class", "shade")
                    .text("a simple tooltip");


                var state = svg.selectAll(".state")
                      .data(data)
                      .enter().append("g")
                      .attr("class", "state")
                      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

                state.selectAll("rect")
                      .data(function (d) { return d.ages})
                      .enter().append("rect")
                      .attr("width", x1.rangeBand())
                      .attr("x", function (d) { return x1(d.name); })
                      .attr("y", function (d) { return y(d.value); })
                      .attr("height", function (d) { return height - y(d.value); })
                      .style("fill", function (d) { return color(d.name); })
                      .on("mouseover", function (d) {

                          tooltip.text(d.name)
                          tooltip.append("br")
                          var tooltipPar = tooltip.append('p')
                          var labeltooltip = tooltip.append('label').attr('class', GetColor(d.name))
                          //tooltipPar.Text(d.state.value)//Need to display the value of state here
                          labeltooltip.text(d.value)

                          return tooltip.style("visibility", "visible");
                      })

Я пытаюсь сделать попытку просто отобразить state on mouse hover, но я не получилудачи.

Я просто думаю, что этот код:

 var state = svg.selectAll(".state")
                      .data(data)
                      .enter().append("g")
                      .attr("class", "state")
                      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

или это:

var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

d.state не может быть отображено, потому что mouseover функция только возвратd.ages?

Я пробовал этот код:

.on("mouseover", function (d) {
                          data.forEach(function(k){

                              tooltip.text(d.name + " " + k.State  + " " + y(d.value))
                              tooltip.append("br")
                              var tooltipPar = tooltip.append('label')

                              var labeltooltip = tooltip.append('label').attr('class', GetColor(d.name))
                              labeltooltip.text(d.value)
                          })

Но это всегда только последняя запись.

Любая отличная идея очень ценится.