Javascript D3.js只是画一条垂直线，而不是实际绘制
我一直在搜索我的thorugh一堆帖子和教程，试图找出d3，我想我找到了其中的大部分，但这不是一条线，我不知道为什么。这是一个简单的Javascript D3.js只是画一条垂直线，而不是实际绘制,javascript,d3.js,data-visualization,Javascript,D3.js,Data Visualization,我一直在搜索我的thorugh一堆帖子和教程，试图找出d3，我想我找到了其中的大部分，但这不是一条线，我不知道为什么。这是一个简单的d3.line（）图形。必须将数据转换为适合.line（）的格式，并且它是。我还在控制台中确认数据的格式是 [{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...] 如果有人能帮我，我会很感激的。在D3V4之前还有什么好的教程吗 var width = 500; var height = 500
d3.line（）.line（）[{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...]
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);
inLineDatad3的形式出现。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生命周期方法，尤其是enter（） 但是，让我们先说，我们只有一个空白页，没有 段落。我们如何在页面上获得新的段落，代表 数据？Enter.Enter（）。当我们对现有选择调用enter（）时， 我们切换到一个子选择，该子选择表示尚待处理的数据 映射到元素，因为在 页来表示所有当前数据集。换句话说，如果有 数据集中的数据是否比页面上的元素多 子选择表示尚未添加的元素 博斯托克本人也有一个简单易懂的条形图。这可能有助于消除您的实现中缺少的任何困惑 又是那个讨厌的enter（） 因为我们知道选择是空的，所以返回的更新和退出 选择也是空的，我们只需要处理enter选择 表示没有现有元素的新数据。我们 通过将这些缺少的元素附加到enter 选择 var barEnter=barUpdate.enter（）.append（“div”）
在代码段中，似乎缺少D3生命周期方法，尤其是enter（） 但是，让我们先说，我们只有一个空白页，没有 段落。我们如何在页面上获得新的段落，代表 数据？Enter.Enter（）。当我们对现有选择调用enter（）时， 我们切换到一个子选择，该子选择表示尚待处理的数据 映射到元素，因为在 页来表示所有当前数据集。换句话说，如果有 数据集中的数据是否比页面上的元素多 子选择表示尚未添加的元素 博斯托克本人也有一个简单易懂的条形图。这可能有助于消除您的实现中缺少的任何困惑 又是那个讨厌的enter（） 因为我们知道选择是空的，所以返回的更新和退出 选择也是空的，我们只需要处理enter选择 表示没有现有元素的新数据。我们 通过将这些缺少的元素附加到enter 选择 var barEnter=barUpdate.enter（）.append（“div”）
这不是OP的问题：您可以附加一个路径，而无需输入选择。这很公平。我对D3很感兴趣，这只是我第一次偶然注意到的，我在每个D3项目中都看到了它的使用。。。那么问题是什么？示例中缺少代码，但是。。。此代码段中使用了一个
tempArrMaptempArrMaptimetime