D3数组输入线图的例子 [英] d3 array input line graph example
问题描述
我是非常新的D3和为了学习我试图操纵 d3.js行示例中，code如下。我试图修改此使用，我手头上已经有模型数据。该数据传下来作为一个JSON对象。问题是，我不知道如何处理数据，以适应D3所期待的。大多数D3例子使用的键值数组。我想用一个关键的阵列+值数组。
：比如我的数据是按下面的例子结构 //我的数据。一个name属性，以数组值和数组值的值属性。
//数据是JSON对象从服务器返回
VAR TL =新对象;
tl.date =数据[0] .fields.date;
tl.close =数据[0] .fields.close;
的console.log（TL）;
下面是结构在视觉上（是的，它现在时间格式）：
现在这是一个从 data.tsv 调用导致不同的关键 - 值对下面的code。
的目标是原封不动地使用我的数据，而不必遍历我数组preprocess它。的
问题：
1）是否有任何内置的到D3处理这种情况呢？例如，如果键值是绝对必要的，蟒蛇，我们可以使用拉链功能快速生成一个键 - 值列表。
2）我可以用我的数据是，还是它的有无的要变成键 - 值对？
下面是该行的例子code。
//的JavaScript / D3（LINE为例）
VAR利润率= {顶：20，右：20，底部：30，左：50}，
宽度= 640 - margin.left - margin.right，
高度= 480 - margin.top - margin.bottom;VAR parseDate = d3.time.format（％D-％B-％y）的解析。VAR X = d3.time.scale（）
.range（[0，宽度]）;变种Y = d3.scale.linear（）
.range（[身高，0]）;VAR XAXIS = d3.svg.axis（）
.scale（X）
。东方（底部）;变种Y轴= d3.svg.axis（）
.scale（Y）
。东方（左）;VAR线= d3.svg.line（）
.X（函数（D）{返回X（d.date）;}）
.Y（函数（D）{返回Y（d.close）;}）;VAR SVG = d3.select（身体）。追加（SVG）
.attr（宽度，宽+ margin.left + margin.right）
.attr（高度，身高+ margin.top + margin.bottom）
.append（G）
.attr（转换，翻译（+ margin.left +，+ margin.top +））;d3.tsv（/ data.tsv功能（错误数据）{
data.forEach（函数（D）{ d.date = parseDate（d.date）;
d.close = + d.close;
}）; x.domain（d3.extent（数据，功能（D）{返回d.date;}））;
y.domain（d3.extent（数据，功能（D）{返回d.close;}））; svg.append（G）
.attr（类，X轴）
.attr（转换，翻译（0，+高度+））
.CALL（X轴）; svg.append（G）
.attr（类，Y轴）
.CALL（Y轴）
.append（文本）
.attr（改造，旋转（-90））
.attr（Y，6）
.attr（DY，.71em）
.style（TEXT-主播，结束）
的.text（价格（$））; svg.append（路径）
.datum（数据）
.attr（类，线）
.attr（D，线）;
}）;
查看 D3的阵列功能，拉链就是其中之一。
下面是原来的精神与您的数据工作的注释版本： http://bl.ocks.org / patrickberkeley / 9162034
它的核心是这样的：
// 1）邮编收盘值与它们对应的日期/时间
//结果数组的数组：
//
// [[582.13，2点三十〇分00秒]，[583.98，二时45分00秒]，...]
//
数据= d3.zip（data.close，data.date）.MAP（函数（D）{
// 2）格式每个接近和日期/时间值，使D3了解了每个重新presents。
关闭= + D [0]; //如果您的数据源不能在一切都变了，我会重新命名`date`为`time`在这里。
日期= parseTime（D [1]）; // 3）返回一个对象，每个接近和日期/时间对。
返回{关闭：关闭，日期：日期};
}）;
I'm very new to d3 and in order to learn I'm trying to manipulate the d3.js line example, the code is below. I'm trying to modify this to use model data that I already have on hand. This data is passed down as a json object. The problem is that I don't know how to manipulate the data to fit what d3 expects. Most of the d3 examples use key-value arrays. I want to use a key array + a value array. For example my data is structured per the example below:
// my data. A name property, with array values and a value property with array values.
// data is the json object returned from the server
var tl = new Object;
tl.date = data[0].fields.date;
tl.close = data[0].fields.close;
console.log(tl);
Here is the structure visually (yes it time format for now):
Now this is different from the data.tsv call which results in key-value pairs in the code below.
The goal is to use my data as is, without having to iterate over my array to preprocess it.
Questions:
1) Are there any built in's to d3 to deal with this situation? For example, if key-values are absolutely necessary in python we could use the zip function to quickly generate a key-value list.
2) Can I use my data as is, or does it have to be turned into key-value pairs?
Below is the line example code.
// javascript/d3 (LINE EXAMPLE)
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 640 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("/data.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
Check out d3's array functions, zip is among them.
Here's a commented version of the original gist working with your data: http://bl.ocks.org/patrickberkeley/9162034
The core of it is this:
// 1) Zip the close value with their corresponding date/time
// Results in an array of arrays:
//
// [[582.13, "02:30:00"], [583.98, "02:45:00"], ...]
//
data = d3.zip(data.close, data.date).map(function(d) {
// 2) Format each close and date/time value so d3 understands what each represents.
close = +d[0];
// If your data source can't be changed at all, I'd rename `date` to `time` here.
date = parseTime(d[1]);
// 3) Return an object for each close and date/time pair.
return {close: close, date: date};
});
这篇关于D3数组输入线图的例子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
