d3.js - dc.js 中带有 JSON 对象的折线图

Question

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

标签： d3.jsdc.jscrossfilter

Answer 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>