如何为每个数据对象分组数据并创建行？

Question

我目前在下面的画布上实现了轴。但是，我是D3的新手，无法找到有关如何使行从0开始并且达到每个放置的'y'值的数据点的足够信息。我正在寻找的是一条曲线。每个展示位置也应该有自己的行。如何确保将每个数据对象分组到一行，从0开始或从'y'开始？

https://jsfiddle.net/Gereltuya/xby3j6k6 /

var data=[
  {
    "placement_name": "BAN1",
    "alpha": 140.3,
    "beta": 0.0000386,
    "max_x_val": "28,675.00",
    "spend": 29919,
    "y": 93.93621404
  },
  {
    "placement_name": "BAN2",
    "alpha": 115.31,
    "beta": 0.0000208,
    "max_x_val": "32,302.00",
    "spend": 28367,
    "y": 56.39370495
  },
  {
    "placement_name": "BAN3",
    "alpha": 91.9,
    "beta": 0.0000507,
    "max_x_val": "19,740.00",
    "spend": 16972,
    "y": 58.10382629
  },
  {
    "placement_name": "ADJ4",
    "alpha": 91.8,
    "beta": 0.000029119,
    "max_x_val": "25,855.00",
    "spend": 27112,
    "y": 48.56107812
  },
  {
    "placement_name": "ADJ5",
    "alpha": 90.3,
    "beta": 0.0000281,
    "max_x_val": "25,793.00",
    "spend":23883,
    "y": 46.55407367
  },
  {
    "placement_name": "ADJ6",
    "alpha": 88.8,
    "beta": 0.0000178,
    "max_x_val": "25,263.00",
    "spend": 28401,
    "y": 32.12792707
  },
  {
    "placement_name": "ADJ7",
    "alpha": 47.3,
    "beta": 0.000100787,
    "max_x_val": "10,226.00",
    "spend": 12428,
    "y": 30.4244956
  },
  {
    "placement_name": "ADJ8",
    "alpha": 47.3,
    "beta": 0.0000254,
    "max_x_val": "25,669.00",
    "spend": 21899,
    "y": 22.65738987
  },
  {
    "placement_name": "ADJ",
    "alpha": 43.98,
    "beta": 0.00018458,
    "max_x_val": "6,928.00",
    "spend": 9068,
    "y": 31.73686214
  }
];



 var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;



xScale = d3.scale.linear().range([margin.left, width - margin.right]).domain([d3.min(data, function(d) {
    return d.spend;
}), d3.max(data, function(d) {
    return d.spend;
})]),


yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([d3.min(data, function(d) {
    return d.y;
}), d3.max(data, function(d) {
    return d.y;
})]),


color = d3.scale.category10()
    .domain(d3.keys(data[0]).filter(function(key) { return key === "placement_name"; })),

xAxis = d3.svg.axis()
    .scale(xScale)
    .tickFormat(d3.format('d'))
    .orient('bottom'),



yAxis = d3.svg.axis()
    .scale(yScale)          
    .orient("left"),



vis = d3.select(".jumbotron").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

vis.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + yScale(0) + ")")
      .call(xAxis);
vis.append("g")
      .attr("class", "y axis")
      .call(yAxis);

vis.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);     
vis.selectAll(".y line")
      .attr('class', 'grid')
      .attr("x2", width);     

  vis.selectAll(".x line")
      .attr('class', 'grid')
      .attr("y2", height)
      .attr("transform", "translate(0," + (-yScale(0)) + ")");    


  vis.selectAll(".x text")
      .attr("transform", "translate(-5, -4)");    



 var lineGen = d3.svg.line()
                        .x(function(d,i) {
                            return xScale(i);
                        })
                        .y(function(d,i) {
                            return yScale(d);
                        })
                        .interpolate("basis");    
  var people = vis.selectAll(".people")
      .data(data)
    .enter().append("g")
     .attr("class", "people");    


 people.append("path")
      .attr("class", "lineGen")
      .attr("d",lineGen(data))
      .style("stroke", function(d) { return color(d.placement_name); });      



  people.append("text")
      .datum(function(d) { return {name: d.placement_name,value: d.spend}; })
      .attr("x", 0)
      .attr("dy", ".35em")
      .text(function(d) { return d.placement_name; });