我做了一个平底锅和一个缩放图表，从数据库中获取日期并在X轴上绘制它们。然后我需要在顶部添加折线图，但我很难弄清楚我正在使用的日期有什么问题。
这是我的代码：
/****
*
* Set the variables
*
****/
var totalValues = data.length,
maxValue = 0,
maxValueTarget = 0,
maxConsumption = 0;
data.forEach(function(d) {
if (Math.max(d.value, d.target) > maxValue) {
maxValue = Math.max(d.value, d.target);
}
if (Math.max(d.value) > maxConsumption) {
maxConsumption = Math.max(d.value);
maxValueTarget = maxConsumption - d.target;
}
});
var dateRange = d3.extent(data, function(d){
console.log('dateRange', d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)));
return d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date));
});
// Set the margin values for the graph
var margin = {top: 60, right: 20, bottom: 30, left: 60},
width = $('.svg-container').width() - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([dateRange[0], dateRange[1]])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, maxValue])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width);
var valueline = d3.svg.line()
.x(function(d,i) {
// console.log('d.date', d.date);
// console.log('x .date',x(getDate(d)));
console.log('valueline', d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)));
return x(d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)))
})
.y(function(d) {
return y(d.target);
});
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([-5, 200])
.on("zoom", zoomed);
// Set up the svg canvas
var svg = d3.select(".svg-container svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("path") // Add the valueline path.
.attr("class", "line target-profile")
.attr("d", valueline(data));
d3.select("button").on("click", reset);
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
}
function reset() {
d3.transition().duration(750).tween("zoom", function() {
var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
iy = d3.interpolate(y.domain(), [-height / 2, height / 2]);
return function(t) {
zoom.x(x.domain(ix(t))).y(y.domain(iy(t)));
zoomed();
};
});
}
来自控制台日志的示例数据：
Error: Problem parsing d="MNaN,336.85547908946535LNaN,74.44679724722073LNaN,103.31392271042881LNaN,99.19004764425625LNaN,95.71731074642668LNaN,80.95817893065112LNaN,118.94123875066174LNaN,112.64690312334568LNaN,99.62413975648491LNaN,91.37638962413979LNaN,92.67866596082587LNaN,114.6003176283748LNaN,116.7707781895183LNaN,102.8798305982001LNaN,81.17522498676544LNaN,103.09687665431443LNaN,96.15140285865533LNaN,122.19692959237693LNaN,108.95712016940183LNaN,94.84912652196931LNaN,114.38327157226047LNaN,79.87294865007937LNaN,87.25251455796723LNaN,84.64796188459502LNaN,71.62519851773425LNaN,61.64107993647434LNaN,87.90365272631021LNaN,84.21386977236631LNaN,80.08999470619375LNaN,117.6389624139756LNaN,95.50026469031235LNaN,79.22181048173638LNaN,90.07411328745371LNaN,80.30704076230813LNaN,112.64690312334568LNaN,73.14452091053465LNaN,66.85018528321865LNaN,78.35362625727902LNaN,105.05029115934354LNaN,86.38433033350981LNaN,101.36050820539964LNaN,65.76495500264696LNaN,90.50820539968237LNaN,87.46956061408156LNaN,57.73425092641611LNaN,90.29115934356804LNaN,133.48332451032292LNaN,97.67072525145579LNaN,60.9899417681313LNaN,144.98676548438328LNaN,81.17522498676544LNaN,85.73319216516677LNaN,89.85706723133939LNaN,80.95817893065112LNaN,80.08999470619375LNaN,93.98094229751194LNaN,101.79460031762835LNaN,88.12069878242454LNaN,90.29115934356804LNaN,0LNaN,112.4298570672313LNaN,52.95923769190051LNaN,104.83324510322922LNaN,125.01852832186341LNaN,73.36156696664904LNaN,117.42191635786128LNaN,77.9195341450503LNaN,115.46850185283222LNaN,121.97988353626255LNaN,91.59343568025412LNaN,68.36950767601905LNaN,67.50132345156169LNaN,97.23663313922708LNaN,94.41503440974066LNaN,93.76389624139756LNaN,119.59237691900478LNaN,121.11169931180518LNaN,88.98888300688196LNaN,123.28215987294863LNaN,78.35362625727902LNaN,103.5309687665432LNaN,139.5606140815246LNaN,47.53308628904182LNaN,85.08205399682367LNaN,66.41609317098994LNaN,97.01958708311275LNaN,111.3446267866596LNaN,127.40603493912124LNaN,100.70937003705666LNaN,121.11169931180518LNaN,95.71731074642668LNaN,95.50026469031235LNaN,97.23663313922708LNaN,98.32186341979889LNaN,65.33086289041819LNaN,67.06723133933298LNaN,105.05029115934354LNaN,118.2901005823187LNaN,94.84912652196931LNaN,54.04446797247226LNaN,83.12863949179462LNaN,117.20487030174695LNaN,116.11964002117526LNaN,84.43091582848069LNaN,87.25251455796723LNaN,100.49232398094227LNaN,70.5399682371625LNaN,189.48120698782427"
正如您所看到的，x .date控制台日志的值始终相同，因为它看起来好像没有在图表上绘制任何内容。有人能告诉我哪里出错了吗？
答案 0 :(得分：0)
这是我最后使用的代码。
我更改了dateRange变量，添加了一个getDate函数，并使用该函数为valueline路径设置x轴。
/****
*
* Set the variables
*
****/
function getDate(d) {
return d3.time.format("%Y-%m-%d %H:%M:%S").parse(d.date);
}
var totalValues = data.length,
maxValue = 0,
maxValueTarget = 0,
maxConsumption = 0,
dateRange = d3.extent(data, function(d){ return new Date(d.date); });
data.forEach(function(d) {
if (Math.max(d.value, d.target) > maxValue) {
maxValue = Math.max(d.value, d.target);
}
if (Math.max(d.value) > maxConsumption) {
maxConsumption = Math.max(d.value);
maxValueTarget = maxConsumption - d.target;
}
});
// Set the margin values for the graph
var margin = {top: 60, right: 20, bottom: 30, left: 60},
width = $('.svg-container').width() - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([dateRange[0], dateRange[1]])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, maxValue])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width);
var valueline = d3.svg.line()
.x(function(d,i) {
return x(getDate(d)); })
.y(function(d) { return y(d.target); });
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([-5, 200])
.on("zoom", zoomed);
// Set up the svg canvas
var svg = d3.select(".svg-container svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("path") // Add the valueline path.
.attr("class", "line target-profile")
.attr("d", valueline(data));
d3.select("button").on("click", reset);
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
}
function reset() {
d3.transition().duration(750).tween("zoom", function() {
var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
iy = d3.interpolate(y.domain(), [-height / 2, height / 2]);
return function(t) {
zoom.x(x.domain(ix(t))).y(y.domain(iy(t)));
zoomed();
};
});
}