折线图没有连接连续的点

Question

我正在尝试根据 csv 格式的数据绘制一个简单的折线图。折线图错误地连接了点。例如，在下面给出的折线图中，绘图从第 3 个点开始，一直走到最后，到达第 1 个和第 2 个点。

这是我的代码：

d3.csv("./sample.csv", function(data){  
  var ndx = crossfilter(data);
  var interval = ndx.dimension(function(d) {return d["Freq(MHz)"];});
  var field = "value1";
  var minF = d3.min(data.map(d => d["Freq(MHz)"]).map(Number));
  var miny = d3.min(data.map(d => d[field]).map(Number)) -10;
  var maxy = d3.max(data.map(d => d[field]).map(Number)) + 10;
  var maxF = d3.max(data.map(d => d["Freq(MHz)"]).map(Number));

  var hitslineChart  = dc.lineChart("#time-chart"); 
  thput = interval.group().reduceSum(function(d) {return d[field];});

  hitslineChart[0]
    .width(1200).height(350)
      .dimension(interval)
      .group(thput,field)
      .x(d3.scale.linear().domain([minF,maxF]))
      .brushOn(false)
      .renderHorizontalGridLines(true)
      .yAxisLabel(field)
      .xAxisLabel("Frequency(MHz)")
      .xAxisPadding(100)   
      .y(d3.scale.linear().domain([miny, maxy]))
      .mouseZoomable(true)


  hitslineChart.render()
})

我无法弄清楚这个问题。

Answer 1

可能是 crossfilter 按字典顺序而不是数字顺序对 X 坐标进行排序。

与JSON不同，d3.csv()必然return将所有字段作为字符串。（我认为他们正在 D3v6 中重新审视这一点。）

我不确定他们是否在任何地方清楚地定义了它，但是 crossfilter "natural ordering" 将字符串作为字符串进行比较，将数字作为数字进行比较。 Some details here.

你可以试试

var interval = ndx.dimension(function(d) {
  return +d["Freq(MHz)"];
});

注意这里的+——或者使用你喜欢的数字强制转换方法，JS 有很多。

在将数据传递给交叉过滤器之前进行任何转换会更快更安全，因此您可以考虑

data.forEach(function(d) {
  d['Freq(MHz)'] = +d['Freq(MHz)'];
  // any other numbers or dates to convert here?
});
var ndx = crossfilter(data);

折线图没有连接连续的点

line chart isn't connecting consecutive points

crossfilter

dc.js