我今天正在研究一个项目并遇到了问题，因为它的javascript我不能完全确定错误发生在哪里。我正在使用D3库创建图表，我对它的经验很少。
目标是在折线图中显示给定时间段内的血糖数据。现在我把它硬编码，以便显示最后2天（x轴），读数范围在0-300（y轴）之间。 x和y轴显示，但是当我尝试绘制线条（创建路径）时，不会显示任何内容。
javascript如下：
var vis = d3.select("#visualisation"),
WIDTH= 1000,
HEIGHT = 500,
START = new Date(2015, 2, 16, 0, 0), //static start date
END = new Date(2015, 2, 18, 0, 0), //static end date
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain([START,END]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,300]),
xAxis = d3.svg.axis()
.scale(xScale),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
vis.append("svg:g") //append x-axis
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") //repositions the x-axis lower
.call(xAxis);
vis.append("svg:g") //append y-axis
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(d.datetime);
})
.y(function(d) {
return yScale(d.BG);
});
var logs = []; //empty array
$.get( "show/log", function( data ) {
$.each(data, function(index, value) {
console.log(value);
logs.push({"BG" : value["bg"], "datetime" : new Date(value["date"] + "T" + value["time"]) });
console.log(logs);
});
vis.append('svg:path')
.attr('d', lineGen(logs))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
});
此外，在任何人要求之前，＆＃34;记录＆＃34;在我将它传递给＆＃34; lineGen＆＃34;之前，它是一个有效的对象数组。
logs: [
{ BG: "276", datetime: Mon Feb 16 2015 13:52:00 GMT-0500 (Eastern Standard Time) },
{ BG: "211", datetime: Mon Feb 16 2015 16:21:00 GMT-0500 (Eastern Standard Time) },
{ BG: "109", datetime: Mon Feb 16 2015 17:55:00 GMT-0500 (Eastern Standard Time) },
{ BG: "96", datetime: Mon Feb 16 2015 18:39:00 GMT-0500 (Eastern Standard Time) },
{ BG: "150", datetime: Tue Feb 17 2015 06:49:00 GMT-0500 (Eastern Standard Time) },
{ BG: "194", datetime: Tue Feb 17 2015 07:54:00 GMT-0500 (Eastern Standard Time) }
]
而且，如果我在执行后检查页面，此路径在页面中，但似乎是在屏幕外？还是隐藏？
<path d="M-12681.958333333334,56.79999999999998L-12633.84375,156.46666666666664L-12603.489583333334,312.8666666666667L-12589.28125,332.79999999999995L-12353.552083333334,250L-12332.5625,182.53333333333336" stroke="green" stroke-width="2" fill="none"></path>
任何想法？
答案 0 :(得分：1)
好的，我已经从您的代码中创建了一个代码段并更正了一些问题，请试一试：
var vis,
START = new Date(2015, 1, 16, 0, 0), //static start date
END = new Date(2015, 1, 18, 0, 0), //static end date
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
WIDTH = 1000 - MARGINS.left - MARGINS.right,
HEIGHT = 500 - MARGINS.top - MARGINS.bottom,
logs = [
{ BG: "276", datetime: "Mon Feb 16 2015 13:52:00 GMT-0500 (Eastern Standard Time)" },
{ BG: "211", datetime: "Mon Feb 16 2015 16:21:00 GMT-0500 (Eastern Standard Time)" },
{ BG: "109", datetime: "Mon Feb 16 2015 17:55:00 GMT-0500 (Eastern Standard Time)" },
{ BG: "96", datetime: "Mon Feb 16 2015 18:39:00 GMT-0500 (Eastern Standard Time)" },
{ BG: "150", datetime: "Tue Feb 17 2015 06:49:00 GMT-0500 (Eastern Standard Time)" },
{ BG: "194", datetime: "Tue Feb 17 2015 07:54:00 GMT-0500 (Eastern Standard Time)" }
],
xScale = d3.time.scale().range([0, WIDTH]).domain([START,END]),
yScale = d3.scale.linear().range([HEIGHT, 0]).domain([0,300]),
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom"),
yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
vis = d3.select("#visualisation").append("svg")
.attr("width", WIDTH + MARGINS.left + MARGINS.right)
.attr("height", HEIGHT + MARGINS.top + MARGINS.bottom)
.append("g")
.attr("transform", "translate(" + MARGINS.left + "," + MARGINS.top + ")");
vis.append("svg:g") //append x-axis
.attr("class", "x axis")
.attr("transform", "translate(0," + HEIGHT + ")") //repositions the x-axis lower
.call(xAxis);
vis.append("svg:g") //append y-axis
.attr("class", "y axis")
//.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(d) {
return xScale(d.datetime);
})
.y(function(d) {
return yScale(d.BG);
});
/*
var logs = []; //empty array
$.get( "show/log", function( data ) {
$.each(data, function(index, value) {
console.log(value);
logs.push({"BG" : value["bg"], "datetime" : new Date(value["date"] + "T" + value["time"]) });
console.log(logs);
});
*/
logs.forEach(function(d) {
d.datetime = new Date(d.datetime);
});
vis.append('svg:path')
.attr('d', lineGen(logs))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
// });.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="visualisation"></div>
不同的事情：
在javascript中，month对象的Date实际上是零引用，即。 1月= 0，2月= 1等...您的START和END变量实际上已设置为3月，这就是为什么您的行有如此大的负值。
您没有向DOM添加svg元素，只是将g元素直接放在div#visualisation元素中而没有父{{1}所以他们没有出现。
我使用http://bl.ocks.org/mbostock/3883245作为示例进行了一些其他更改。特别是，我创建了一个父svg元素来存储所有图元素，允许它由g和MARGINS.top作为整个实体进行翻译，这意味着你可以在MARGINS.left元素中完全忘记它们，只引用g中的所有内容，以便更容易放置所有svg元素。
为您的轴和线添加了样式，因为默认的0, 0样式通常不存在并且看起来很垃圾。