D3 V4多系列折线图：将数据点添加到颜色与折线相同的折线上

Question

I am trying to add points to multi series line chart with D3 V4 in Angular-cli. Following is what I am trying.

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);
      });

Chart is creating... Points are there but their colors are not matching with the colors of lines. Something like below.

Any suggestions of what I have done wrong with my code.

Thank You

Answer 1

The problem is that the data points that are used to draw the circles don't contain name parameter. For all the circles d.name is undefined and they are all colored the same (third color from the z scale, which happens to be green). The easiest solution should be to add the name parameter to data points like this:

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

If you apply the fill to the group the children will inherit that style.

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);
  });

The way your code is doing right now, after you bind the data using just the values , the circles have no reference to name anymore.

PS: applying styles to groups will change all their children. So, a solution following @Tormi approach may suit you better.