从javascript变量将数据导入d3.js

tl；dr我如何直接从其他javascript变量而不是从文件导入d3.js数据

长版本：

这个问题在另外两个地方被问到，但答案是。。。平淡无奇，所以我想我应该问得更具体一点

我第一次尝试用d3.js创建一个图表，但是我需要从其他javascript变量（特别是数组）加载数据，而不是从下面这样的外部文件加载数据。我在rails 4应用程序中使用javascript

我想将其转换为：

    d3.csv("sp500.csv", type, function(error, data) {
    x.domain(d3.extent(data.map(function(d) { return d.date; })));
    y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
    x2.domain(x.domain());
    y2.domain(y.domain());

    focus.append("path")
        .datum(data)
        .attr("class", "area")
        .attr("d", area);

    focus.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    focus.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    context.append("path")
        .datum(data)
        .attr("class", "area")
        .attr("d", area2);

    context.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height2 + ")")
        .call(xAxis2);

    context.append("g")
        .attr("class", "x brush")
        .call(brush)
      .selectAll("rect")
        .attr("y", -6)
        .attr("height", height2 + 7);
  });

直接从我已经设置的javascript变量加载数据，如下所示：

    var data = [];
    for (i = 0; i < Math.round(totaltime / interval); i++)
    {
      data[i] = {
        "x": i,
        "y": reactionratebyinterval[i]
      };
    }

someSVG.selectAll(".element-class")
    .data(your_data_variable)
    .enter()
    .append("circle")
    .classed("range-circle-inner", true)
    .attr({
      // here: d is element in your data array
      "cx": function(d) {
        return d.x;
      },
      "cy": op.top,
      "r": function(d, i){
        return d.y;
      },
      "fill": "#4499ee"
    });

---

或者它使用我上面的代码，从某种文件导入。但我需要从其他变量导入它，这些变量的大小和内容可能随时发生变化。我该怎么做？

d3.csv

仅用于加载数据时需要填充数据的情况，因此它提供了一个回调函数来处理此问题

但在你的情况下，你根本不需要回调

您只需调用

d3.append

函数，然后像这样介绍您的数据：

    var data = [];
    for (i = 0; i < Math.round(totaltime / interval); i++)
    {
      data[i] = {
        "x": i,
        "y": reactionratebyinterval[i]
      };
    }

someSVG.selectAll(".element-class")
    .data(your_data_variable)
    .enter()
    .append("circle")
    .classed("range-circle-inner", true)
    .attr({
      // here: d is element in your data array
      "cx": function(d) {
        return d.x;
      },
      "cy": op.top,
      "r": function(d, i){
        return d.y;
      },
      "fill": "#4499ee"
    });

---

希望能帮助您：）

这无疑为我提供了一个良好的起点，谢谢！我的图表是折线图，你能澄清一下吗？如果有帮助的话，它将有一个Y轴的日期，和一个X轴的整数。我填充数据的代码是：

var lineData=[]；对于（i=0；i

我只是为您做一个演示，您可以自己更改lineData，并检查结果。：）