d3.js中的点数

Question

我正在d3.js中创建一个折线图,如下所示:

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

然后我想在这些行数据点上加点:

var points = svg.selectAll(".point")
        .data(cities1[0].values)
      .enter().append("svg:circle")
         .attr("stroke", "black")
         .attr("fill", function(d, i) { return "black" })
         .attr("cx", function(d, i) { return x(d.date) })
         .attr("cy", function(d, i) { return y(d.temperature) })
         .attr("r", function(d, i) { return 3 });

结果不是我所期望的:

然后我改变插值("基础")到插值("基数")并获得我想要的东西:

为什么我的基础错误？我怎么能用基础绘制准确的分数呢？

编辑:类似(未答复)的问题.看看这个jsfiddle.它仅在将插值从基础更改为基数(或其他)模式时才有效.但Cardinal有一个问题,它不尊重图的最大高度.我正在寻找的是解释为什么一些插值模式阻止将点放在正确的位置(以及为什么基数不尊重最大高度).

Answer 1

遗憾的是,这是"基础"插值的一个属性 - 该线不一定贯穿这些点.没有办法"修复"这个.除非你绝对需要这种特殊的插值,否则只需坚持使用一个允许你得到正确点数的插值.

您可以实现自定义插值,使您可以访问该线穿过的点并相应地添加圆.这需要对d3和线路插值器如何工作有一定深入的了解.