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

Question

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

长版：

这个问题在其他两个地方被问到 here and here，但答案相当......乏善可陈，所以我想我会问得更具体一些。

我第一次尝试使用 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]
      };
    }

但我的所有尝试都失败了，因为我认为我不太了解当您不从文件导入时到底发生了什么变化。而我能找到的每个例子都是仅有的两种类型之一——要么数据直接在代码中输入到图表中，例如：

var lineData = [{
  'x': 1,
  'y': 5
}, {
  'x': 20,
  'y': 20
}, {
  'x': 40,
  'y': 10
}, {
  'x': 60,
  'y': 40
}, {
  'x': 80,
  'y': 5
}, {
  'x': 100,
  'y': 60
}];

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

Answer 1

d3.csv仅用于数据加载完成后需要填充数据，所以它提供了一个回调函数来处理这个。

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

您只需要调用 d3.append 函数并像这样引入您的数据：

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"
    });

希望能帮到你:)

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

Importing data into d3.js from javascript variables

javascript

ruby-on-rails

d3.js