小编hra*_*itz的帖子

我在d3中使用了一个简单的折线图,插入了"后续步骤".

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });
// Note that with step-after, the last data point shows no "step". Why?
line.interpolate('step-after');

(http://jsfiddle.net/hrabinowitz/zCmHw/1/)这显示除了最后一个数据点之外的每个数据点之后的水平线.

对于少量的点,如果您将x轴视为时间,则这是不直观的,因为最后一个间隔不会显示.

我试图在数据的末尾添加一个额外的点,使用null或NaN值.

// add a null entry after last date
var DAY_IN_MILLIS = 24*60*60*1000;
dataArray.push(
    {date: new Date(dataArray[dataArray.length-1].date.getTime() + DAY_IN_MILLIS), 
     close:NaN});

(http://jsfiddle.net/hrabinowitz/abJLf/49/)

这样可以提供更好的外观,但由于NaN值,它会在行的路径中触发svg解析错误.

我也尝试使用line.defined()函数,但这也无济于事,因为如果我使附加点未定义,则在实际数据的末尾不会绘制任何步骤.

任何人都可以建议一种方法来处理这个问题,而不会触发解析异常？

我想画一条末端带有箭头的虚线折线。问题是，看起来 strokeOpacity 应该出现在图标数组上，但是对于虚线它需要为 0，而对于绘制箭头则需要为正值。有没有解决的办法？

这是一个说明困境的示例：https://jsfiddle.net/hrabinowitz/1ckk2c2L/18/

关键的代码是 javascript：

// This example converts a polyline to a dashed line, by
// setting the opacity of the polyline to 0, and drawing an opaque symbol
// at a regular interval on the polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 20.291, lng: 153.027},
    mapTypeId: 'terrain'
  });

  // Define a symbol using SVG path notation, with an opacity of 1.
  var lineSymbol = {
    path: 'M 0,-1 …