D3 V4マルチシリーズラインチャート：ラインと同じ色のラインにデータポイントを追加する

Question

D3 V4を使用したマルチシリーズラインチャートにポイントを追加しようとしています。私がやっていることは次のとおりです。

var lookBookData = z.domain().map(function (name) { 
     return { 
     name: name, 
     values: data.map(function (d) { 
      return {date: d.date, lookbookcount: d[name]}; 
     }) 
     }; 
    }); 

    console.log(lookBookData); 

    x.domain(d3.extent(data, function (d) { 
     console.log(d) 
     return d.date; 
    })); 

    y.domain([ 
     d3.min(lookBookData, function (c) { 
     return d3.min(c.values, function (d) { 
      return d.lookbookcount; 
     }); 
     }), 
     d3.max(lookBookData, function (c) { 
     return d3.max(c.values, 
      function (d) { 
      return d.lookbookcount; 
      }); 
     }) 
    ]); 

    z.domain(lookBookData.map(function (c) { 
     console.log(c); 
     return c.name; 
    })); 

    // Add the X Axis 
    svg.append("g") 
     .style("font", "14px open-sans") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%d/%m"))); 

    // Add the Y Axis 
    svg.append("g") 
     .style("font", "14px open-sans") 
     .call(d3.axisLeft(y)); 

    // Add Axis labels 
    svg.append("text") 
     .style("font", "14px open-sans") 
     .attr("text-anchor", "end") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .text("Sales/Searches"); 

    svg.append("text") 
     .style("font", "14px open-sans") 
     .attr("text-anchor", "end") 
     // .attr("x", 6) 
     .attr("dx", ".71em") 
     .attr("transform", "translate(" + width + "," + (height + 
     (margin.bottom)) + ")") 
     .text("Departure Date"); 

    var chartdata = svg.selectAll(".chartdata") 
     .data(lookBookData) 
     .enter().append("g") 
     .attr("class", "chartdata"); 

    chartdata.append("path") 
     .attr("class", "line") 
     .attr("d", function (d) { 
     return line(d.values); 
     }) 
     .style("fill", "none") 
     .style("stroke", function (d) { 
     return z(d.name); 
     }) 
     .style("stroke-width", "2px"); 

    chartdata.append("text") 
     .datum(function (d) { 
     return { 
      name: d.name, value: d.values[d.values.length - 1] 
     }; 
     }) 
     .attr("transform", function (d) { 
     return "translate(" + 
      x(d.value.date) + "," + y(d.value.lookbookcount) + ")"; 
     }) 
     .attr("x", 3) 
     .attr("dy", "0.35em") 
     .style("font", "14px open-sans") 
     .text(function (d) { 
     return d.name; 
     }); 

    // add the dots with tooltips 
    chartdata.selectAll(".circle") 
     .data(function (d) { 
     return d.values; 
     }) 
     .enter().append("circle") 
     .attr("class", "circle") 
     .attr("r", 4) 
     .attr("cx", function (d) { 
     console.log(d); 
     return x(d.date); 
     }) 
     .attr("cy", function (d) { 
     return y(d.lookbookcount); 
     }) 
     .style("fill", function(d) { // Add the colours dynamically 
     console.log(d); 
     return z(d.name); 
     }); 

グラフ作成中...ポイントはありますが、その色は線の色と一致しません。以下のようなもの。

私は私のコードで間違ってやっていることの任意の提案。

は、問題が円を描画するために使用されているデータ点がnameパラメータが含まれていないということであるあなたに

Answer 1

ありがとうございます。すべてのサークルd.nameはundefinedです。これらはすべて同じ色です（zスケールから3番目の色は緑色になります）。あなたがグループにfillを適用した場合、子供はそのスタイルを継承します

var lookBookData = z.domain().map(function (name) { 
    return { 
    name: name, 
    values: data.map(function (d) { 
     return {date: d.date, lookbookcount: d[name], name: name}; 
    }) 
    }; 
}); 

Answer 2

：最も簡単な解決策は、このようなデータポイントに名前のパラメータを追加する必要があります。あなただけのvaluesを使用してデータをバインドした後

chartdata.style("fill", function(d) { 
    return z(d.name); 
    }) 
    .selectAll(".circle") 
    .data(function (d) { 
    return d.values; 
    }) 
    .enter().append("circle") 
    .attr("class", "circle") 
    .attr("r", 4) 
    .attr("cx", function (d) { 
    console.log(d); 
    return x(d.date); 
    }) 
    .attr("cy", function (d) { 
    return y(d.lookbookcount); 
    }); 

あなたのコードが今やっている方法は、円はもうnameへの参照を持っていません。

PS：グループにスタイルを適用すると、すべての子供が変更されます。ですから、@Tormiのアプローチに従った解決策は、あなたに適しているかもしれません。