在d3js中，如何从csv文件绘制折线图，​​从每行的单独列中获取数据

Question

我是d3js的新手。我在csv文件中有数据。 csv文件中的数据是这样的：

名称，VAL1，VAL2，VAL3，VAL4
X，5,4,8,2
Y，10,5,4,13
Z，7,3,2,11

我需要根据所选择的选项绘制每一行的折线图，即x值为5,4,8的图表或者具有相应值＆amp;的y的图表。等等。

以下是我正在处理的代码：

var slots=["0-6", "6-12", "12-18", "18-23"];

newdata = rawdata.filter(function(d)
{
return (d["Name"] == ch);
});

maxval = d3.max(rawdata, function(d)
{
    return Math.max(d["Val1"],d["Val2"],d["Val3"],d["Val4"]);
});

var rangeX=d3.scale.ordinal().rangeRoundBands([0, w], 0.2).domain(slots);
var rangeY=d3.scale.linear().range([h, 0]).domain([0, (maxval+50)]);
var axis_x=d3.svg.axis().scale(rangeX).tickSize(2).ticks(4);
var axis_y=d3.svg.axis().scale(rangeY).tickSize(2).orient("left");

p.append("g").call(axis_x).attr("transform", "translate(0," + (h) + ")");;
p.append("g").call(axis_y).attr("transform", "translate(0,0)");

var lineGen = d3.svg.line()
                .x(slots, function(slots, i){return xScale(slots[i]);})
                .y(newdata, function (d, i){return yScale(d["Data "+(i+1)]);})

p.selectAll("line").attr("d", lineGen()).attr("stroke", "red").attr("stroke-width", 2).attr("fill", "none");

我知道＆＃34; lineGen＆＃34;功能不能按照我使用的方式使用，我不能使用＆＃34; slot＆＃34; ＆安培; ＆＃34; newdata＆＃34;像这样在＆＃34; x＆＃34; ＆安培; ＆＃34; Y＆＃34 ;.但是试了一下 有人可以指导我做些什么吗？

Answer 1

这是一个可能的解决方案。首先，使用d3.csv .row将数据组织到key: [values]的对象中，其中key是您的x，y和z，值是val1，val2，...的数组/ p>

d3.csv("data.csv")
  .row(function(d) {
    return {
      key: d.Name,
      values: [+d.val1, +d.val2, +d.val3, +d.val4]
    };
  })
  .get(function(error, data) {
     // draw plot
  }

然后您的线路生成器就是：

    var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d,i) { return rangeX(slots[i]); })
      .y(function(d,i) { return rangeY(d); });

你画每一行：

    var g = p.selectAll(".lineGroup")
      .data(data)
      .enter().append("g")
      .attr("class", "lineGroup"); 

    g.append("path")
      .attr("class", "line")
      .attr("d", function(d) {
        return line(d.values);
      })
      .style("stroke", function(d,i) {
        return color(i);
      })
      .attr("fill","none");

这里是example。