d3.js - 折れ線グラフにポイントと値を追加する...ポイントを線のように色付けする方法は?

Question

マルチラインの例から始めましたhttp://bl.ocks.org/mbostock/3884955 線に沿ってドットを表示するように拡張しましたが、円に線と同じ色を与えることができません。 .. 私は本当に d3.js が初めてで、本当にアドバイスが必要です。ここに例のページがあります: http://www.danielepennati.com/d3/linea.html いくつかの変数名を変更して、スクリプトをより一般的なものにしたので、元の例のコードとは多少の違いがあります。主なものは、マッピングされたデータを含む変数の名前です。これは「都市」ではなく「列」です。

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

var column = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {id: d.id, value: +replace(d[name])};
    })
  };
});

2 番目の主な違いは x 軸です。私のコードでは序数であり、線形ではありません。線を引くためのコードは次のとおりです。

var tracciato = svg.selectAll(".line-group")
.data(column)
.enter().append("g")
.attr("class", "line-group");

tracciato.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });

このコードを書いた線に沿ってポイントを作るために：

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

    point.selectAll('circle')
    .data(function(d,i){ return d.values})
    .enter().append('circle')
    .attr("cx", function(d, i) {
        return x(i) + x.rangeBand() / 2;
      })
     .attr("cy", function(d, i) { return y(d.value) })
     .attr("r", 5);

ポイントの色を線と同じにリンクしますが、問題は色が「列」オブジェクトに割り当てられていることです。同じ列内の新しい各円に同じ列の色を与える方法がわかりません...

私の問題が明確かどうかわかりません。さらに仕様が必要かどうか尋ねてください。ありがとう