Javascript D3如何按唯一名称分组

数据

newdata = [
   {'Name':'Andrew', 'Country':'US', 'Start date':'2012-7-2','Total':'30days'
}, {'Name':'Kat', 'Country':'US', 'Start date':'2012-2-2','Total':'24days'
}, {'Name':'Barry', 'Country':'France', 'Start date':'2012-12-2','Total':'22days'
}, {'Name':'Ash', 'Country':'US', 'Start date':'2015-2-2','Total':'20days'
}, {'Name':'Lucy', 'Country':'UK', 'Start date':'2016-2-2','Total':'35days'
}, {'Name':'Gerry', 'Country':'US', 'Start date':'2016-2-2','Total':'40days'
}, {'Name':'Alex', 'Country':'France', 'Start date':'2016-2-2','Total':'28days'
}, {'Name':'Morgan', 'Country':'UK', 'Start date':'2012-6-2','Total':'24days'
}];

我希望能够为每个不同的“国家”（总共3个）创建一个组，然后用属于它们的“名称”填充每个组

我的问题是如何返回“国家”的唯一名称来创建组

在绑定数据时，我已经成功地使用d3.map（）创建了3个组，但这去掉了其余的值

代码

var canvas = d3.select('#chart')
  .append('svg')
  .attr('width', 350)
  .attr('height', 600)
  .append('g')
  .attr('transform', 'translate(0,20)')

var country = canvas
  .selectAll(".country")
  .data(newdata)

var countryEnter = country
  .enter().append("g")
  .attr('class', 'country')

countryEnter
  .append("text")
  .attr('class', 'name')

country.select('.name')
  .text(function(d, i) {
    return d.Country;
  })
  .attr('y', function(d, i) {
    return i * 30;
  });

var nested_data = d3.nest()
  .key(function(d) { return d.Country; })
  .entries(newdata);
   console.log(nested_data)

var canvas = d3.select('#chart')
  .attr('width', 350)
  .attr('height', 600)
  .attr('transform', 'translate(0,20)')

var country = canvas
  .selectAll(".country")
  .data(nested_data)

var countryEnter = country
  .enter().append('div')
  .attr('class', 'country')

countryEnter
  .append("p")
  .attr('class', 'label')
  .style('font-weight', 'bold')
  .text(function(d, i) {
    return d.key;
  })

countryEnter.selectAll('.name')
    .data(function(d) {
      return d.values;
    })
    .enter().append('p')
    .attr('class', 'name')
     .text(function(d) {
      return d.Name;
    })

更新

筑巢对我有用。正如Cyril所建议的，我使用d3.nest（）从“Country”创建键。我还决定在这里使用div和p，而不是svg:g

新工作代码

var canvas = d3.select('#chart')
  .append('svg')
  .attr('width', 350)
  .attr('height', 600)
  .append('g')
  .attr('transform', 'translate(0,20)')

var country = canvas
  .selectAll(".country")
  .data(newdata)

var countryEnter = country
  .enter().append("g")
  .attr('class', 'country')

countryEnter
  .append("text")
  .attr('class', 'name')

country.select('.name')
  .text(function(d, i) {
    return d.Country;
  })
  .attr('y', function(d, i) {
    return i * 30;
  });

var nested_data = d3.nest()
  .key(function(d) { return d.Country; })
  .entries(newdata);
   console.log(nested_data)

var canvas = d3.select('#chart')
  .attr('width', 350)
  .attr('height', 600)
  .attr('transform', 'translate(0,20)')

var country = canvas
  .selectAll(".country")
  .data(nested_data)

var countryEnter = country
  .enter().append('div')
  .attr('class', 'country')

countryEnter
  .append("p")
  .attr('class', 'label')
  .style('font-weight', 'bold')
  .text(function(d, i) {
    return d.key;
  })

countryEnter.selectAll('.name')
    .data(function(d) {
      return d.values;
    })
    .enter().append('p')
    .attr('class', 'name')
     .text(function(d) {
      return d.Name;
    })

---

您可以使用nest对数据进行分组

var nested_data = d3.nest()
.key(function(d) { return d.Country; })
.entries(newdata);
console.log(nested_data)

希望这有帮助

这会对你有更多帮助