在 D3 多线图上创建点答案

【问题标题】：Create points on a D3 multiline graph在 D3 多线图上创建点
【发布时间】：2013-09-09 07:02:21
【问题描述】：

在此示例中，我尝试使用 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); });

【问题讨论】：

在.style()之前的行尾有一个分号。
是的，这是默认设置。
您实际上还没有发布用于设置笔触颜色的代码...
是的，所以 d.name 可能没有为圈子定义，因为它是一个子选择 (d.values)。我想一个简单的方法是将名称也放入所有这些数据点中。

标签： d3.js

【解决方案1】：

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

See JSBin code
找到答案here

【讨论】：