Javascript D3：从csv到数组

我从这个页面下载了javascript代码。我想做一个改变，事实上html页面从csv文件获取数据，而我想直接从同一html页面上的数组获取数据。 也就是说，我想在index.html中创建一个简单的数字数组和一个月数组，并从中获取数据

这是获取数据的部分：

d3.csv("sp500.csv", type, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, 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", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

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

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

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

  context.append("g")
      .attr("class", "brush")
      .call(brush)
      .call(brush.move, x.range());

  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);
});

虽然我希望在html页面上有一个数字数组和一个di月数组，但不使用csv：

var price = [9, 6, 2];
var date = [Jan 2000, Feb 2000, Mar 2000]

---

我该怎么办？谢谢

您可以跳过

csv

功能，使用您自己的数据

而不是

d3.csv("sp500.csv", type, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  //...
})

你可以做：

var data = [{date:'Jan 2000', price: 9}, {}, {}, ...];

x.domain(d3.extent(data, function(d) { return d.date; }));
//...

如果您想保持其功能，还可以：

var process = function(data) {
  x.domain(d3.extent(data, function(d) { return d.date; }));
  //...
})

process({date:'Jan 2000', price: 9}, {}, {}, ...]); // <-- the data

var过程=函数（数据）{
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
//...
})
进程（{日期：2000年1月，价格：9}，{}，{}，{}，…]）；// 您可以跳过
csv
功能，使用自己的数据

而不是

d3.csv("sp500.csv", type, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  //...
})

你可以做：

var data = [{date:'Jan 2000', price: 9}, {}, {}, ...];

x.domain(d3.extent(data, function(d) { return d.date; }));
//...

如果您想保持其功能，还可以：

var process = function(data) {
  x.domain(d3.extent(data, function(d) { return d.date; }));
  //...
})

process({date:'Jan 2000', price: 9}, {}, {}, ...]); // <-- the data

var过程=函数（数据）{
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
//...
})
进程（{日期：2000年1月，价格：9}，{}，{}，{}，…]）；// 下面是一个将数组作为输入的函数

var data = [{date: 'Jan 2000', price: 9}, {date: 'Feb 2000', price:6},{date: 'Mar 2000', price: 2}];

data.forEach(function (d) {
  d.date = parseDate(d.date);
  d.price = +d.price;
});

一个相同的代码段：



.区域{
填充：钢蓝；
剪辑路径：url（#剪辑）；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：110，左侧：40}，
margin2={顶部：430，右侧：20，底部：30，左侧：40}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
height2=+svg.attr（“height”）-margin2.top-margin2.bottom；
var parseDate=d3.timeParse（“%b%Y”）；
var x=d3.scaleTime（）.range（[0，宽度]），
x2=d3.scaleTime（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
y2=d3.scaleLinear（）.range（[height2，0]）；
var xAxis=d3.axisBottom（x），
xAxis2=d3.轴底（x2），
yAxis=d3。轴左（y）；
var brush=d3.brushX（）
.范围（[[0,0]，[width，height2]]）
.在（“刷端”，刷过的）；
var zoom=d3.zoom（）
.scaleExtent（[1，无穷大]）
.translateExtent（[[0,0]，[width，height]]
.范围（[[0,0]，[width，height]]）
。打开（“缩放”，缩放）；
var area=d3.area（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x（d.date）；}）
.y0（高度）
.y1（函数（d）{返回y（d.price）；}）；
var area 2=d3.面积（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x2（d.date）；}）
.y0（高度2）
.y1（函数（d）{返回y2（d.price）；}）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var context=svg.append（“g”）
.attr（“类”、“上下文”）
.attr（“transform”、“translate”（+margin2.left+）、“+margin2.top+”）；
var数据=[{日期：2000年1月，价格：9}，{日期：2000年2月，价格：6}，{日期：2000年3月，价格：2}]；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 价格=+d.价格；
});
x、 域（d3.extent（数据，函数（d）{返回d.date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.price；}）]；
x2.域（x.域（））；
y2.域（y.域（））；
focus.append（“路径”）
.基准（数据）
.attr（“类别”、“区域”）
.attr（“d”，区域）；
focus.append（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
focus.append（“g”）
.attr（“类”、“轴--y”）
.呼叫（yAxis）；
context.append（“路径”）
.基准（数据）
.attr（“类别”、“区域”）
.attr（“d”，区域2）；
上下文。附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度2+”）
.呼叫（xAxis2）；
上下文。附加（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
.call（brush.move，x.range（））；
svg.append（“rect”）
.attr（“类”、“缩放”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（缩放）；
函数brushed（）{
if（d3.event.sourceEvent&&d3.event.sourceEvent.type==“缩放”）返回；//按缩放忽略笔刷
var s=d3.event.selection | | x2.range（）；
x、 域（s.map（x2.invert，x2））；
焦点。选择（“.area”）.attr（“d”，区域）；
焦点。选择（“.axis--x”）。调用（xAxis）；
svg.select（“.zoom”）.call（zoom.transform，d3.zoomIdentity
.刻度（宽度/（s[1]-s[0]））
.translate（-s[0]，0））；
}
函数缩放（）{
if（d3.event.sourceEvent&&d3.event.sourceEvent.type==“画笔”）返回；//忽略按画笔缩放
var t=d3.event.transform；
x、 域（t.rescaleX（x2.domain（））；
焦点。选择（“.area”）.attr（“d”，区域）；
焦点。选择（“.axis--x”）。调用（xAxis）；
context.select（“.brush”）.call（brush.move，x.range（）.map（t.invertX，t））；
}
下面是一个将数组作为输入的函数

var data = [{date: 'Jan 2000', price: 9}, {date: 'Feb 2000', price:6},{date: 'Mar 2000', price: 2}];

data.forEach(function (d) {
  d.date = parseDate(d.date);
  d.price = +d.price;
});

一个相同的代码段：



.区域{
填充：钢蓝；
剪辑路径：url（#剪辑）；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：110，左侧：40}，
margin2={顶部：430，右侧：20，底部：30，左侧：40}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
height2=+svg.attr（“height”）-margin2.top-margin2.bottom；
var parseDate=d3.timeParse（“%b%Y”）；
var x=d3.scaleTime（）.range（[0，宽度]），
x2=d3.scaleTime（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
y2=d3.scaleLinear（）.range（[height2，0]）；
var xAxis=d3.axisBottom（x），
xAxis2=d3.轴底（x2），
yAxis=d3。轴左（y）；
var brush=d3.brushX（）
.范围（[[0,0]，[width，height2]]）
.在（“刷端”，刷过的）；
变焦=