在D3多线图上创建点 [英] Create points on a D3 multiline graph

问题描述

在此示例中，我尝试使用d3向线形图中添加点：$ b​​ $ b http：// bl。 ocks.org/mbostock/3884955

我也试图关注此帖

如何使文档中的点数看起来像这张图片？
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]）。 key！==date;}））; 
 
 data.forEach（function（d）{
 d.date = parseDate（d.date）; 
} ; 
 
 var ranks = color.domain（）。map（function（name）{
 return {
 name：name，
 values：data.map （d）{
 return {date：d.date，ranking：+ d [name]}; 
}）
}; 
}）; 
  





  var rank = svg.selectAll（。rank）
 .data（rank）
 .enter（）。append（g）
 .attr ，rank）; 
 rank.append（path）
 .attr（class，line）
 .attr（d返回行（d.values）;}）
 .style（stroke，function（d）{return color（d.name）;}）; 
  pre> 
 
 
 
 
  = 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 （stroke，function（d）{return color（this.parentNode .__ data__.name）;}）
  
 请参阅JSBin代码 
 
找到答案此处 
 
I'm trying to add points to a line graph using d3 in this example:
http://bl.ocks.org/mbostock/3884955

I was also trying to follow this post

How do you get the points to look like this picture from the documentation?
http://github.com/mbostock/d3/wiki/line.png

The stroke of the circle should match the line color.
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("stroke", function(d) { return color(this.parentNode.__data__.name); })
See JSBin code

Found answer here 

                        
这篇关于在D3多线图上创建点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！