Javascript D3基于头名称追加

我的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

是

date

，但是我找不到方法告诉d3我想引用列名。尝试如下：

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

问题

---

如何告诉d3我的意思是将

cx

作为标题名称本身？

要将数据与

一起使用。选择All

要为每个基金创建一个圆圈，您需要将数据转换为一个结构，其中每个基金都有一个数据条目

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)
}, [])

首先，您的原始数据：

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)})

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

[
  {
    "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)})

---

希望这有帮助

顺便说一句，当您在yScale中定义

域时，您使用
d.date
（日期为小写），而在
数据
数组中，变量为
date
（日期为大写）。可能是某个点出错的原因。除上述注释外，刻度的域不正确：使用时间刻度时，域必须是日期对象，而不是字符串。我希望您正在其他地方解析这些字符串。