如何在d3.js v4中平滑连接点处的两条曲线？

我解决了我的初始目标，即让最后一个点通过虚线连接，而曲线的其余部分通过实线连接。请参见图片

但是，通过如下操作，我失去了曲线的平滑。 你将如何解决这个问题

此外，如何让样式取代HTML5中的类？圆圈有一个红色的笔划作为样式属性，但如果它有一个蓝色的笔划，则赢得该类比赛

    // curve
    self.svg.append("path")
    .datum(function() {return data.slice(0,data.length-1);})
        .attr("stroke", colors(i)) 
        .attr("class", "line ")
        .attr("d", d3.line()
            .curve(d3.curveCatmullRom)
            .x(function(d) { return self.xSales(d.period) + self.xSales.bandwidth()/2;})
            .y(function(d) { return self.ySales(v(d)); })
        );

    self.svg.append("path")
    .datum(function() {return data.slice(data.length-2, data.length);})
        .attr("stroke", colors(i)) 
        .attr("class", "line currentPeriod")
        .attr("d", d3.line()
            .curve(d3.curveCatmullRom)
            .x(function(d) { return self.xSales(d.period) + self.xSales.bandwidth()/2;})
            .y(function(d) { return self.ySales(v(d)); })
        );

---

关于我的评论：

对于第一个问题，您需要生成一条路径，并使用虚线偏移和渐变颜色

我提供了一个很好的答案，关于如何破折号一段单路径，但它没有提供颜色。因此，我更新了以下内容：

身体{ 字体：10px无衬线； } .轴线路径， .轴线{ 填充：无； 中风：000； 形状渲染：边缘清晰； } .x轴路径{ 显示：无； } .线路{ 填充：无； 笔划宽度：1.5px； } var保证金={ 前20名， 右:20,， 底数：30， 左：50 }, 宽度=960-margin.left-margin.right， 高度=500-margin.top-margin.bottom； var data=d3.range11.mapfunctiond，i{ 返回{ x:我， y:数学，随机*100 }; }; var x=d3.scale.linear .范围[0，宽度] .域[0,10]； 变量y=d3.scale.linear .范围[高度，0] .域[01100]； var xAxis=d3.svg.axis scalex先生 .定向底部； var yAxis=d3.svg.axis 斯卡利先生 .orientleft； var line=d3.svg.line .X功能{ 返回xd.x； } .功能正常{ 返回yd.y； } .内阿米巴病； var svg=d3.selectbody.appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； var lG=svg.appenddefs .appendlinearGradient .attrid，lineColor .X1，0% .x2，100% .属性1，0% .属性2，0%； lG.appendstop .attr偏移量，0 .ATRTSTOP颜色，钢蓝色； svg.appendg .attrclass，x轴 .attrtransform，translate0，+高度+ .callxAxis； svg.appendg .属性类，y轴 卡利亚克斯先生 var p=svg.appendpath .datumdata .阶级，阶层 .attrstroke，urllineColor .attrd，行； //在X域中从2.7到7绘制虚线 var dashBetweenX=[2.5,7] 路径=p.node， totalen=path.getTotalLength； //找到相应的行长度 var dashBetweenL=dashBetweenX.mapfunctiond，i{ var开始=0， 结束=总计， target=null， d=xd； //找到对应于X值的线长度 //从@duopixel从http://bl.ocks.org/duopixel/3824661 虽然是真的{ 目标=Math.floorbeginning+end/2； pos=path.getPointAtLengthtarget； 如果目标===end | |目标===start&&pos.x！==d{ 打破 } 如果位置x>d端=目标； 否则，如果位置x要回答第二个问题，请使用.stylestroke。。。而不是.attr，那么它将是CSS，其行为类似于CSS。对于第一个问题，您需要生成一条路径，并使用虚线偏移和渐变颜色。