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

问题描述

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

对象（/signalData.json）：

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

键应为x坐标，值应为y坐标

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

var data = {
  "1": 10,"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>

解决方法

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

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

成为

[{ key: number,value: number },{ key: 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>

crossfilter dc.js