D3.js只是绘制了一条垂直线,实际上并没有绘制出图片
我一直在搜索我的一些帖子和教程,试图找出d3,我想我得到了大部分的感觉,但这不是绘制线,我不知道为什么。这是一个简单的d3.line()
图。数据必须转换成适合.line()
的格式,并且是。我也在控制台证实,该数据是在格式D3.js只是绘制了一条垂直线,实际上并没有绘制出图片
[{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...]
如果任何人都可以帮助我这个,我会很感激。还有什么好的教程出来e3 d3 v4?
var width = 500;
var height = 500;
var margin = 25;
var axisLength = width - 2 * margin;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid");
// 5. X scale will use the index of our data
var xScale = d3.scaleTime()
.domain(d3.extent([new Date(1881,0,1),new Date(2015,0,1)]))
.range([0, width]); // output
// 6. Y scale will use the randomly generate number
var yScale = d3.scaleLinear()
.domain(d3.extent(tempArrMap["Glob"], function(d) {return d;}))
.range([height, 0]); // output
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
svg.append("g")
.classed("x-axis", true)
.attr("transform", function() {
return "translate(" + margin + "," + (height - margin) + ")";
})
.call(xAxis);
var yrsCol = getCol(tempData,0)
var globCol = getCol(tempData,1);
var LineData = { x:yrsCol, y:globCol};
function fn(data){
var out = data.y.map(function (_, idx) {
return { time: data.x[idx], temp: data.y[idx] };
});
return out;
}
svg.append("g")
.classed("y-axis", true)
.attr("transform", function() {
return "translate(" + margin + "," + margin + ")";
})
.call(yAxis);
var inLineData = fn(LineData);
inLineData
现在在适于d3.line()
一个形式是形式对象的数组。我已通过控制台确认数据的有效性。
[{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...]
var line = d3.line()
.x(function(d) { return xScale(d.time); })
.y(function(d) { return yScale(d.temp); });
svg.append("path")
.attr("d", line(inLineData))
.attr("fill", "none")
.attr("stroke", "red")
.attr("transform", function() {
return "translate(" + margin + "," + margin + ")";
});
在你的片段,看来你缺少你D3生命周期方法,尤其是输入()。
http://synthesis.sbecker.net/articles/2012/07/09/learning-d3-part-2
但可以说,首先,我们只是有一个空白页,没有 段落。我们如何在页面上获得新的段落,代表 数据?输入.enter()。当我们在现有选择上调用enter()时,我们切换到代表映射到元素的尚未被 的数据的子选择,因为在 页面上还没有足够的数据来表示所有的当前数据集。换句话说,如果 在我们的数据集中的基准数多于页面上的元素,则“输入” 子选择表示尚未添加的元素。
从这个人自己,博斯托克有一个容易遵循通过条形图走过。这可能有助于消除您的实施缺失中的任何混淆。
https://bost.ocks.org/mike/bar/
有那个讨厌的进入()一次。
因为我们知道选择为空,则返回的更新和退出 选择也是空的,而我们只需要处理输入选择 它代表不存在其现有元素的新数据。我们 通过附加到输入 选择实例化这些缺失的元素。
var barEnter = barUpdate.enter()。append(“div”);
这不是OP的问题:你可以追加一个没有输入选择的路径。 –
够公平的。我很喜欢D3,它只是我偶然注意到的,我已经看到每个D3项目都使用过的第一件事......所以这个错误是什么? 这个例子中缺少代码,因为它似乎...在这段代码中使用了一个'tempArrMap'变量,但尚未定义。 –
解析日期。 OP将数字传递给一个时间尺度。 –
您的'时间'属性不是日期,而是数字。你必须解析它们。 –
ahh yess这就是它。谢谢。 – ASS466uiuc