D3.js 如何在路径中为笔划着色？

我是新来的。我想为我正在使用的笔划添加颜色，但我无法这样做。我在代码中添加了用于应用笔划颜色的属性，但它不起作用。我希望每一行都有不同的颜色。请帮助我找到可行的解决方案。

您的代码似乎工作正常。下面是d3的实现方式

var保证金={ 前30名， 右:20,， 底数：30， 左：50 }; 变量宽度=600-margin.left-margin.right； 变量高度=270-margin.top-margin.bottom； var parseDate=d3.timeFormat%c.parse； var x=d3.刻度线范围[0，宽度]； 变量y=d3.刻度线范围[高度，0]； var xAxis=d3.axisBottom .scalex.tick5； var yAxis=d3.0左 .scaley.tick5； var valueline=d3.line .X功能{ 返回xd.date； } .功能正常{ 返回yd.close； }; var colors=d3.scaleOrdinald3.schemeCategory 10； var svg=d3.selectbody .appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； //获取数据 风险值数据=[{ 日期：1， 收盘：58.13 }, { 日期:二〇〇四年四月二日， 收盘：53.98 }, { 日期：2007年3月3日， 收盘时间：67:00 }, { 日期：2007年4月4日， 收盘：89.70 }, { 日期:5,， 收盘时间：99.00 }, { 日期：6， 闭馆时间：20时 }]; 变量数据2=[{ 日期：1， 收盘：52.13 }, { 日期:二〇〇四年四月二日， 收盘时间：30时98分 }, { 日期：2007年3月3日， 闭馆时间：36:00 }, { 日期：2007年4月4日， 收盘：40.70 }, { 日期:5,， 闭馆时间：20时 }, { 日期：6， 收盘时间：96:00 }]; data.foreachd函数{ d、 日期=d.日期； d、 close=+d.close； }; //调整数据的范围 x、 domaind3.extentdata，函数d{ 返回日期； }; y、 域[0，d3.maxdata，已运行{ 返回d.close； }]; svg.selectAllpath.line.data[数据，数据2] 进来 appendpath//添加valueline路径。 .阶级，阶层 .attrd，valueline .attrstrow，函数，i{ 返回颜色si； }; svg.appendg//添加X轴 .attrclass，x轴 .attrtransform，translate0，+高度+ .callxAxis； svg.appendg//添加Y轴 .属性类，y轴 .callyAxis； 路径{ 填充：无； } D

window.onload = function(){
    var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
};var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;

var parseDate = d3.timeFormat("%c").parse;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom()
    .scale(x).ticks(5);

var yAxis = d3.axisLeft()
    .scale(y).ticks(5);

var valueline = d3.line()
    .x(function (d) {
      return x(d.date);
    })
    .y(function (d) {
      return y(d.close);
    });

var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data
var data = [{
    date: "1 ",
    close: "58.13"
}, {
    date: "2 ",
    close: "53.98"
}, {
    date: "3 ",
    close: "67.00"
}, {
    date: "4 ",
    close: "89.70"
}, {
    date: "5 ",
    close: "99.00"
}, {
    date: "6 ",
    close: "20.00"
}];

var data2 = [{
    date: "1 ",
    close: "52.13"
}, {
    date: "2 ",
    close: "30.98"
}, {
    date: "3 ",
    close: "36.00"
}, {
    date: "4 ",
    close: "40.70"
}, {
    date: "5 ",
    close: "20.00"
}, {
    date: "6 ",
    close: "96.00"
}];

data.forEach(function (d) {
    d.date = d.date;
    d.close = +d.close;
});

// scaleLinear the range of the data
x.domain(d3.extent(data, function (d) {
    return d.date;
    }));
y.domain([0, d3.max(data, function (d) {
    return d.close;
    })]);

svg.append("path") // Add the valueline path.
.attr("d", valueline(data)).attr("stroke","red");

svg.append("path") // Add the valueline path.
.attr("d", valueline(data2)).attr("stroke","blue");

svg.append("g") // Add the X Axis
.attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g") // Add the Y Axis
.attr("class", "y axis")
    .call(yAxis);
 }