javascript - D3 根据 header 名称追加

Question

这是我的 xScale 的样子:

  var fundTypes = ['Trust', 'BMWP', 'Pension', 'MMF'];

  var xScale = d3.scaleBand()
      .domain(fundTypes)
      .range([0,width]);

对于我的 yScale，我有:

  var yScale = d3.scaleTime()
      .domain(d3.extent(data, function(d) {return d.date}))
      .range([height,0]);

我的数据是这样的:

var data = [
    {'Trust':7, 'BWMP':5, 'Pension':4, 'MMF':3, 'Date':'2019-07'},
    {'Trust':8, 'BWMP':5, 'Pension':3, 'MMF':2, 'Date':'2019-08'}
    ...
];

我想创建圆圈，其中 cx 是 fundType，cy 是日期，但是我可以找不到办法告诉 d3 我的意思是引用列名称。尝试如下:

  graphGroup.selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', function(d) {return xScale(d.???????)})

问题

如何告诉 d3 我的意思是 cx 是 header 名称本身？

Answer 1

要将您的数据与 .selectAll 结合使用来为每个基金创建一个圆圈，您需要将数据转换为一个结构，其中每个基金都有一个数据条目。

首先，您的原始数据:

var data = [
  {'Trust':7, 'BWMP':5, 'Pension':4, 'MMF':3, 'Date':'2019-07'},
  {'Trust':8, 'BWMP':5, 'Pension':3, 'MMF':2, 'Date':'2019-08'}
];

我们将其调整为不同的结构，每个基金都有一个条目。

var circleData = data.map((fundCollection) => {
  return Object.keys(fundCollection).map((singleFund) => {
    return {
      fund: singleFund,
      count: fundCollection[singleFund],
      date: fundCollection.Date
    }
  }).filter((d) => {
    return d.fund !== 'Date'
  })
}).reduce((acc, curr) => {
  return acc.concat(curr)
}, [])

结果是一个如下所示的数据结构:

[
  {
    "fund": "Trust",
    "count": 7,
    "date": "2019-07"
  },
  {
    "fund": "BWMP",
    "count": 5,
    "date": "2019-07"
  },
  ...
]

使用新的数据结构，您可以为每种基金类型插入圆圈，如下所示:

graphGroup.selectAll('circle')
  .data(circleData)
  .enter()
  .append('circle')
  .attr('cx', function(d) {return xScale(d.fund)})
  .attr('cy', function(d) {return yScale(d.date)})

希望这有帮助!