折线图未连接连续的点

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

交叉过滤器可能按字典顺序而不是数字顺序对X坐标进行排序。

与JSON不同，d3.csv()必须将所有字段作为字符串返回。 （我认为他们正在D3v6中重新审视此问题。）

我不确定他们是否清楚地在任何地方定义它，但是crossfilter进行“自然排序”，将字符串作为字符串进行比较，将数字作为数字进行比较。 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);