Javascript 当只有元组时，如何从JSON将数据加载到D3图表

我有一个JSON文件，看起来像：

编辑：我使用日期作为键，而不是像我以前键入的那样使用整数

"2005-12-01": 120,
"2005-10-01": 32,

现在我需要使用第一列作为X轴，另一列作为Y轴。 在示例中，它们通过元素名称引用值，如：

const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value));

---

我在这里不能这样做。

循环JSON的键并创建新对象

data = Object.keys(data).map(k => { return {x:+k, value: data[k]}; });

也许你需要对数组进行排序

data.sort( (a,b) => a.x - b.x );

var数据={“0”：120，
"1": 32,
"2": 234,
"3": 43};
data=Object.keys（data.map）（k=>{return{x:+k，value:data[k]}；}）；
控制台日志（数据）您必须将键映射到具有键/值对的对象数组，然后使用它设置域并绘制线

// The number of datapoints
var json = {
  "2005-12-01": 120,
  "2005-10-01": 32,
  "2005-08-01": 20,
  "2005-06-01": 123
};

var data = Object.keys(json).map(function (k) { 
  return {date: new Date(k), value: +json[k]};
});

其余代码与绘制简单的折线图相同

我使用您问题中的JSON作为输入数据创建了一个示例d3折线图的分支。（除了数据映射外，几乎不需要更改任何行）



.线路{
填充：无；
行程：#ffab00；
笔画宽度：3；
}
// 2. 使用保证金惯例惯例
var margin={顶部：50，右侧：50，底部：50，左侧：50}
，width=window.innerWidth-margin.left-margin.right//使用窗口的宽度
，height=window.innerHeight-margin.top-margin.bottom；//利用窗户的高度
//数据点的数量
var json={
"2005-12-01": 120,
"2005-10-01": 32,
"2005-08-01": 20,
"2005-06-01": 123
};
var data=Object.keys（json）.map（函数（k）{return{date:newdate（k），值：+json[k]}；}）；
// 5. X标度将使用我们数据的索引
var xScale=d3.scaleTime（）
.domain（d3.extent（data，d=>d.date））//输入
.范围（[0，宽度]；//输出
// 6. Y刻度将使用随机生成的数字
var yScale=d3.scaleLinear（）
.domain（d3.extent（数据，d=>d.value））//输入
.范围（[高度，0]）；//输出
// 7. d3线发生器
var line=d3.line（）
.x（函数（d，i）{return xScale（d.date）；}）//设置行生成器的x值
.y（函数（d）{return yScale（d.value）；}）//为线路生成器设置y值
.curve（d3.curveMonotoneX）//对直线应用平滑
// 1. 将SVG添加到页面并使用#2
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
// 3. 调用组标记中的x轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（xScale））；//使用d3.axisBottom创建轴组件
// 4. 调用组标记中的y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.call（d3.axisLeft（yScale））；//使用d3.axisLeft创建轴组件
// 9. 追加路径、绑定数据并调用行生成器
追加（“路径”）
.datum（数据）//10。将数据绑定到行
.attr（“类”、“行”）//为样式指定一个类
.attr（“d”，行）；//11调用线路生成器
@JohnV不是一个NaN，而是一个小的语法错误，忘记了a）是的，我也修复了，但我仍然得到NaN。可能是我的密钥是YYYY-MM-DD格式的日期吗？是的，我把它作为一个例子，我不知道这可能有什么关系。谢谢，我正在试图弄清楚，你在哪里设置域？比如x.domain（d3.extent…）之类的是的，请查看代码片段中的代码。它将域设置为
.domain（d3.extent（data，d=>d.date））
@Ah，谢谢，我使用的是另一个示例，代码有点不同：（需要使用它一段时间）我不断得到错误：属性d：预期数字，“MNaN，150CNaN，NaN，…”错误，我猜这和日期有关？我知道了，我把旧格式放在哪里是因为时间问题。再次感谢！