Question

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

长版：

在另外两个地方here和here提出了这个问题，但答案却相当......乏善可陈，所以我想我会更具体地提出这个问题。< / p>

我第一次尝试用d3.js创建一个图表，但是我需要从其他javascript变量（特别是数组）中加载数据，而不是从下面的外部文件中加载数据。我在rails 4 app中使用了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

1 个答案: