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

Question

我正在尝试在Angular-cli中使用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);
      });

图表正在创建...点在那里，但是它们的颜色与线条的颜色不匹配。 像下面这样。

关于我的代码做错了什么的任何建议。

谢谢

Answer 1

问题在于用于绘制圆的数据点不包含name参数。 对于所有圆， d.name都是undefined并且都被着色为相同的颜色（z比例中的第三种颜色，恰好是绿色）。 最简单的解决方案应该是将name参数添加到数据点，如下所示：

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

如果将fill应用于组，则子代将继承该样式。

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

在仅使用values绑定数据之后，代码现在的行为方式是，圆圈不再引用name 。

PS：将样式应用于小组会改变所有孩子。 因此，遵循@Tormi方法的解决方案可能更适合您。