d3.js：dataset数组w /多个y轴值 [英] d3.js: dataset array w/ multiple y-axis values
问题描述
我是d3.js的初学者，所以请务必：）
我有以下数据集：
< blockquote>
var dataset = [
[d3.time.hour.utc.offset（now，-5），1，10]，
[d3.time.hour.utc.offset（now，-4），2，20]，
[d3.time.hour.utc.offset（now，-3），3，30]
[d3.time.hour.utc.offset（now，-2），4，40]，
[d3.time.hour.utc.offset（now，-1），5,50 ]，
[now，6，60]，
];
两个问题。
-
d3提供了一个更好的方法来找到我的y轴数据的最大值（所有列，但第0，第0列是x轴（时间））在我的dataset数组？目前我只是遍历整个数据集数组，并制作第二个数组，排除第一列。也许有一个更好的数据结构，而不是一个数组，我应该使用这个完全？
var data_arr = []
for（数据集中的行）{
for（col = 1; col< dataset [row] .length; col ++）{
data_arr.push [col]）;
}
}
var yScale = d3.scale.linear（）
.domain（[0，d3.max（data_arr）]）
.range（[h - padding，padding]）;
-
一旦解决，我仍然需要确定如何绘制多个y轴值一般！这在我需要多个y轴值之前工作正常：
svg.selectAll（circle）
.data （数据集）
.enter（）
.append（circle）
.attr（cx，function（d）{
return xScale（d [0] ;
}）
.attr（cy，function（d）{
return yScale（d [1]）;
}）
.attr r，2）;
代码此处的完整上下文： http://jsbin.com/edatol/1/edit
任何帮助是感谢！
我对你的例子做了几个更改，你可以看到结果 http://jsbin.com/edatol/2/edit 。
首先，我修改了你的数据一点。这主要是一个风格的东西，但我发现它更容易使用对象而不是数组：
//静态数据集
var dataset = [
{x：d3.time.hour.utc.offset（now，-5），y1：1，y2：10}，
{x：d3.time。 h1：2，y2：20}，
{x：d3.time.hour.utc.offset（now，-3），y1：3，y2： 30}，
{x：d3.time.hour.utc.offset（now，-2），y1：4，y2：40}，
{x：d3.time.hour.utc。 offset（now，-1），y1：5，y2：50}，
{x：now，y1：6，y2：60}，
]
然后您就可以找到您的网域和范围：
var xDomain = d3.extent（dataset，function（i）{return ix;}）;
var maxY = d3.max（dataset，function（i）{return Math.max（i.y1，i.y2）;}）;
然后要添加多个y值，您只需附加一个带有适当值的圆。
/ 如果您想要进行转换或更新， /创建圈子
svg.selectAll（。y1）
.data（dataset）
.enter（）
.append（circle）
.attr （cx，function（d）{return xScale（dx）;}）
.attr（cy，function（d）{return yScale（d.y1）;}）
.attr （class，y1）
.attr（r，2）;
//创建圈子
svg.selectAll（。y2）
.data（dataset）
.enter（）
.append circle）
.attr（cx，function（d）{return xScale（dx）;}）
.attr（cy，function（d）{return yScale（d.y2） ;}）
.attr（class，y2）
.attr（r，2）;
I am a total beginner to d3.js so please be kind :)
considering this jsbin example
I have the following dataset:
var dataset = [ [d3.time.hour.utc.offset(now, -5), 1, 10], [d3.time.hour.utc.offset(now, -4), 2, 20], [d3.time.hour.utc.offset(now, -3), 3, 30], [d3.time.hour.utc.offset(now, -2), 4, 40], [d3.time.hour.utc.offset(now, -1), 5, 50], [now, 6, 60], ];
Two questions.
Does d3 provide a better approach to finding the max value for my y-axis data (all columns but the 0th, the 0th column is x-axis (time)) in my dataset array? Currently I am just looping through the entire dataset array and making a second array, excluding the first column. Perhaps there is a better datastructure other than an array I should be using for this entirely?
var data_arr = []; for (row in dataset){ for (col=1;col < dataset[row].length; col++){ data_arr.push(dataset[row][col]); } } var yScale = d3.scale.linear() .domain([0, d3.max(data_arr)]) .range([h - padding, padding]);Once thats resolved, I still need to determine how to graph multiple y-axis values in general! This worked fine before I needed multiple y-axis values:
svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", 2);
Please take a look at the graph w/ code here now for full context: http://jsbin.com/edatol/1/edit Any help is appreciated!
I've made a couple of changes to your example and you can see the results at http://jsbin.com/edatol/2/edit.
First, I modified your data a little bit. This is mostly just a style thing, but I find it's easier to work with objects instead of arrays:
//Static dataset
var dataset = [
{x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 10},
{x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 20},
{x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 30},
{x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 40},
{x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 50},
{x: now, y1: 6, y2: 60},
];
Then you can find your domains and ranges like this:
var xDomain = d3.extent(dataset, function(i) { return i.x; });
var maxY = d3.max(dataset, function(i) { return Math.max(i.y1, i.y2); });
Then to add multiple y-values, you just have to append an additional circle with the appropriate values. I gave them different classes so that you can use that to select them if you want to do transitions or updates later on.
//Create circles
svg.selectAll(".y1")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.x); })
.attr("cy", function(d) { return yScale(d.y1); })
.attr("class", "y1")
.attr("r", 2);
//Create circles
svg.selectAll(".y2")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.x); })
.attr("cy", function(d) { return yScale(d.y2); })
.attr("class", "y2")
.attr("r", 2);
这篇关于d3.js：dataset数组w /多个y轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
