javascript - D3.js 线图 pandas dataframe JSON

Question

任何人都可以提供一个很好的例子来说明如何使用 D3 来解析 python pandas 数据帧 to_json() 的标准输出，它最终看起来像这样:

"{"column1":{"2017-09-20T11:14:18.000Z":2.1,"2017-09-20T11:14:19.000Z":2.3,"2017-09-20T11:14:20.000Z":2.4}}"

最终我正在寻找一个线图，x 轴为时间，y 轴为“column1”的值

我已经设法让一些东西以不同的格式使用 JSON 数据，如下所示:

{"2017-09-20T11:14:18.000Z","values":["column1":2.1,"column2":3.0]}

但理想情况下，我想避免更改 JSON 的格式，因为它在其他地方使用。如果我遗漏了一些明显的东西，我深表歉意，我认为这样的例子会更容易找到!

Answer 1

最终，您可能希望将一个数组传递给线生成器和缩放函数，该数组包含对象或具有日期和值的数组，这最符合 d3.line() 构建路径的方式。

因此，虽然您不需要更改为绘制数据图表的脚本提供的 json 结构，但绘制数据图表的脚本将需要创建具有更改结构的内容。

d3 中通常需要这种数据结构，因此有许多 d3 辅助函数可以帮助完成此过程。考虑到您的示例数据框，在帮助绘制 d3 中的数据时，我想到了两个辅助函数，d3.keys() 和 d3.map():

d3.keys(object) <>

Returns an array containing the property names of the specified object (an associative array). The order of the returned array is undefined.

并且，在 d3.map() 中，我们最关心的是 map.entries():

map.entries() <>

Returns an array of key-value objects for each entry in this map. The order of the returned entries is arbitrary. Each entry’s key is a string, but the value has arbitrary type.

获取你的 json:

{"column1":{"2017-09-20T11:14:18.000Z":2.1,"2017-09-20T11:14:19.000Z":2.3,"2017-09-20T11:14:20.000Z":2.4}}

我们可以使用(为了演示，我添加了第二列):

var df = {"column1":{"2017-09-20T11:14:18.000Z":2.1,"2017-09-20T11:14:19.000Z":2.3,"2017-09-20T11:14:20.000Z":2.4},
"column2":{"2017-09-20T11:14:18.000Z":2.3,"2017-09-20T11:14:19.000Z":2.1,"2017-09-20T11:14:20.000Z":2.2}};
	
var dataSeries = d3.keys(df);  // get each column
var dataArray = [];            // the data array that we will plot
	
dataSeries.forEach(function(d) {
	dataArray.push(d3.map(df[d]).entries()); // get each key value pair and return as an object
	})
	
console.log(dataArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

这会输出一个包含每个系列的数组。每个系列都包含一个键值对对象，我们可以用它来绘制数据。这将使数据图表相对直接，并且应该有更多使用此数据结构的示例也能提供帮助。

请注意，此方法不要求每列具有相同数量的条目或相同的键(在本例中为相同的日期)。

使用此方法的简单图表可能如下所示:

var width = 500, height = 200;

////////////// structure data

var df = {"column1":{"2017-09-20T11:14:18.000Z":2.1,"2017-09-20T11:14:19.000Z":2.3,"2017-09-20T11:14:20.000Z":2.4},
"column2":{"2017-09-20T11:14:18.000Z":2.3,"2017-09-20T11:14:19.000Z":2.1,"2017-09-20T11:14:20.000Z":2.2}};
	
var dataSeries = d3.keys(df);
var dataArray = [];
	
dataSeries.forEach(function(d) {
	dataArray.push(d3.map(df[d]).entries()); // get each key value pair and return as an object
})

////////////// scale and draw data

var timeParse = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ");
	
var x = d3.scaleTime()
	  .domain(d3.extent(dataArray[0], function(d) { return timeParse(d.key); }) )
	  .range([0,width]);
	  
	var y = d3.scaleLinear()
	  .domain(d3.extent(dataArray[0], function(d) { return d.value; }) )
	  .range([0,height])
	  
	var line = d3.line()
	  .x(function(d) {return x(timeParse(d.key)); })
	  .y(function(d) { return y(d.value); })
	  
	var svg = d3.select("body")
	  .append("svg")
	  .attr("width",width)
	  .attr("height",height);
	  
	svg.selectAll(null)
	  .data(dataArray)
	  .enter()
	  .append("path")
	  .attr("d",line)
	  .attr("stroke", function(d,i) { return ["steelblue","orange"][i]; })
	  .attr("stroke-width",2)
	  .attr("fill","none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

请注意，我仅根据数据框中的第一列缩放了数据