Создание точек на графике многострочного D3

Question

Я пытаюсь добавить точки линейного графика с использованием d3 в этом примере: http://bl.ocks.org/mbostock/3884955

Я также пытался следовать this post

Как получить очки посмотреть на это изображение из документации? http://github.com/mbostock/d3/wiki/line.png

Ход круга должен соответствовать цвету линии.

var color = d3.scale.category10(); 

d3.csv("data.csv", function(error, data) { 
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 

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

    var ranks = color.domain().map(function(name) { 
    return { 
     name: name, 
     values: data.map(function(d) { 
     return {date: d.date, ranking: +d[name]}; 
     }) 
    }; 
    }); 

var rank = svg.selectAll(".rank") 
     .data(ranks) 
    .enter().append("g") 
     .attr("class", "rank"); 
    rank.append("path") 
     .attr("class", "line") 
     .attr("d", function(d) { return line(d.values); }) 
     .style("stroke", function(d) { return color(d.name); }); 

var point = rank.append("g") 
.attr("class", "line-point"); 

point.selectAll('circle') 
.data(function(d){ return d.values}) 
.enter().append('circle') 
.attr("cx", function(d) { return x(d.date) }) 
.attr("cy", function(d) { return y(d.ranking) }) 
.attr("r", 3.5) 
.style("fill", "white") 
.style("stroke", function(d) { return color(d.name); }); 

Answer 1

.style("stroke", function(d) { return color(this.parentNode.__data__.name); }) 

See JSBin code
Найдено ответ here