Javascript 如何使用JSON属性作为D3中的轴刻度值

是否可以将以下JSON属性用作D3中的x轴值？强度将是沿x轴的每年财产的一个条形，而每年财产的价值将是y轴

data.json

{
    "2008": 63,
    "2011": 28,
    "2014": 88,
    "2017": 55,
    "2018": 15,
    "2018": 23,
    "2020": 82
}

---

在d3.js中，您可以通过域指定轴值。比例域是一个包含两个元素（起始值和结束值）的数组

下面的示例首先将您的数据转换为大多数d3.js示例中通常使用的数据格式

  const data = Object.keys(json_data).map(d => ({"year": new Date(d), "value": +json_data[d]}));

您可以获得以下数据：

[
  {"year": 2008-01-01, "value": 63},
  {"year": 2011-01-01, "value": 28},
  {"year": 2014-01-01, "value": 88},
  {"year": 2017-01-01, "value": 55},
  {"year": 2018-01-01, "value": 23},
  {"year": 2020-01-01, "value": 82},
]

然后，您可以按照标准d3示例进行操作，例如：

常量json_数据={
"2008": 63,
"2011": 28,
"2014": 88,
"2017": 55,
"2018": 15,
"2018": 23,
"2020": 82,
};
const data=Object.keys（json_data）.map（d=>（{“年”：新日期（d），“值”：+json_数据[d]}））；
常量边距={顶部：20，右侧：20，底部：30，左侧：40}；
常数宽度=800；
常数高度=600；
const svg=d3.select（“body”）.append（“svg”）
.attr（“视图框”[0,0，宽度，高度]）；
常数x=d3.scaleUtc（）
.域（d3.范围（数据，d=>d.年））
.范围（[margin.left，width-margin.right]）
常数y=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d.value）]）
.range（[height-margin.bottom，margin.top]）；//从底部开始，到顶部
常量行=d3.line（）
.x（d=>x（d年））
.y（d=>y（d.value））；
svg.append（“g”）
.attr（“transform”，`translate（0，${height-margin.bottom}）`）
.call（d3.axisBottom（x））；
svg.append（“g”）
.attr（“transform”，translate（${margin.left}，0）`）
.调用（d3.左（y））；
追加（“路径”）
.基准（数据）
.attr（“填充”、“无”）
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”，1.5）
.attr（“笔划线条连接”、“圆形”）
.attr（“笔划线头”、“圆形”）
.attr（“d”，行）