d3阵列输入线图示例 [英] d3 array input line graph example

问题描述

我是d3的新手，为了学习我试图操纵调用不同，后者导致key-

目标是按原样使用我的数据，而不必迭代数组来对其进行预处理。

问题：

1）有没有内置的d3来处理这种情况？例如，如果键值在python中是绝对必要的，我们可以使用 zip 函数快速生成键值列表。

2）我可以按原样使用我的数据，或者是否已将转换为键值对？

下面是代码行示例。

  // javascript / d3 b 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 ）{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 +））
。 （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 ）
 .datum（data）
 .attr（class，line）
 .attr（d，line）; 
} 
  

解决方案

查看 d3的数组函数， zip 是其中之一。

以下是使用您的数据的原始gist的注释版本： http：/ /bl.ocks.org/patrickberkeley/9162034

其核心是：

  // 1）使用相应的日期/时间来压缩close值
 //生成数组数组：
 // 
 // [ [582.13，02:30:00]，[583.98，02:45:00]，...] 
 // 
 data = d3.zip（data.close，data。日期）.map（function（d）{
 // 2）格式化每个关闭和日期/时间值，以便d3了解每个代表什么。 
 close = + d [0]; 
 
 //如果你的数据源不能被改变，我在这里把'date`重命名为'time'。 
 date = parseTime（d [1]）; 
 
 // 3）为每个关闭和日期/时间对返回一个对象。 
 return {close：close，date：date}; 
}）; 
  

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屋！