dc.js 中带有 JSON 对象的折线图答案

【问题标题】：Linechart with JSON object in dc.jsdc.js 中带有 JSON 对象的折线图
【发布时间】：2020-10-27 16:19:10
【问题描述】：

我是 dc.js 的新手，我想用对象创建一个简单的折线图。

对象（/signalData.json）：

"1": 10, 
"2": 20,
"3": 30, 
"4": 40,
"5": 50, 
"6": 60

键应该是x坐标，值应该是y坐标

我尝试过类似的方法，但它不起作用：

var data = {
  "1": 10,
  "2": 20,
  "3": 30,
  "4": 40,
  "5": 50,
  "6": 60
};

var dataModel = [{
  "keys": Object.keys(data).map(function(d) {
    return +d;
  }),
  "values": Object.values(data)
}, ]

signalCF = crossfilter(dataModel)

signalDim = signalCF.dimension(function(d) {
  return d.keys
}, true)
signalGroup = signalDim.group().reduceSum(function(d) {
  return d.values
});


var linechart = dc.lineChart("#linechart")
  .width(700)
  .height(300)
  .x(d3.scale.linear().domain([0, 6]))
  .renderArea(true)
  .brushOn(false)
  .renderDataPoints(true)
  .clipPadding(10)
  .yAxisLabel("This is the Y Axis!")
  .dimension(signalDim)
  .group(signalGroup);

linechart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.0-alpha.6/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.js"></script>
<div id="linechart"></div>

【问题讨论】：

不起作用是什么意思？你有错误吗？你看到什么了吗？ Object.keys() 返回一个字符串数组，尝试Object.keys(data).map(function(d) { return +d; }) 将字符串转换为数字
它支持图表中的 d.keys 但 d.values 是 NaN
请创建minimal reproducible example，以便我们与您一起调试
我添加了更多信息。现在这是我的所有代码。希望对你有帮助
如果您需要更多信息，请告诉我 :)

标签： d3.js dc.js crossfilter

【解决方案1】：

您对数据结构做出了错误的假设。您需要一个每个刻度有一个值的数组，而不是一个所有值都紧随其后的数组：

[{ keys: [], values: [] }]

变成

[{ key: number, value: number }, { key: number, value: number }, ...]

var data = {
  "1": 10,
  "2": 20,
  "3": 30,
  "4": 40,
  "5": 50,
  "6": 60
};

var dataModel = Object.keys(data).map(function(d) {
  return {
    key: +d,
    value: data[d]
  };
})

signalCF = crossfilter(dataModel)

signalDim = signalCF.dimension(dc.pluck("key"))
signalGroup = signalDim.group().reduceSum(function(d) {
  return d.value;
});


var linechart = dc.lineChart("#linechart")
  .width(700)
  .height(300)
  .x(d3.scale.linear().domain([0, 6]))
  .renderArea(true)
  .brushOn(false)
  .renderDataPoints(true)
  .clipPadding(10)
  .yAxisLabel("This is the Y Axis!")
  .dimension(signalDim)
  .group(signalGroup);

linechart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.0-alpha.6/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.1/dc.js"></script>
<div id="linechart"></div>

【讨论】：

谢谢 Bit 有没有可能按照我的方式进行操作？如果我可以将对象或数组系列作为数据提供，那会很好吗？
我不知道，我试图为你找到它。您获取一组数字数组[10, 20...] 并尝试将它们用于.reduceSum()。但是你不能从数组中添加/减去数组，所以它返回 NaN 并且绘图中断
好的，非常感谢。有什么方法可以联系到你吗？我刚刚开始使用 dc.js，我无法在网上找到好的资源，如果你愿意的话，也许你可以通过几件事来帮助我？ :)
我对 dc 没有任何经验，只有 d3.js。如果您有任何问题，最好的方法是在 StackOverflow 上提问，会有更多人回答。只要确保您的问题是明确的并且以前没有在这里被问过，我相信您会很快得到答案。学习 d3 的最好方法总是通过例子，网上有很多例子！ dc 必须相同。
欢迎来到 dc.js，菲利克斯！对于不适合问答格式的广泛主题，另一个不错的选择是dc.js users group，尽管您可能会在 SO 上找到大多数答案。