D3 JS附加到div奇怪的结果 [英] D3 JS append to div weird result
问题描述
您好,我被困在一个相当奇怪的问题。我有一个图形,当它附加到身体时工作。当我改变这附加到一个div这发生:
正常
![正常状态] http:/ /imgur.com/DIsjkIl
附加到div
![div state] http:/ /imgur.com/9ndyFlT
我注意到轴没有正确绘制,但没有线索如何解决。
$ b
我的代码:
$ b $ p b
//设置画布/图形的尺寸
var margin = {top:15,right:10,bottom:30,left:50},
width = 400 - margin.left - margin.right,
height = 220 - margin.top - margin.bottom;
//解析日期/时间
var parseDate = d3.time.format(%d-%b-%y)。
//设置范围
var x = d3.time.scale()。range([0,width]);
var y = d3.scale.linear()。range([height,0]);
//定义轴
var xAxis = d3.svg.axis()。scale(x)
.orient(bottom)。ticks(5);
var yAxis = d3.svg.axis()。scale(y)
.orient(left)。ticks(5);
//定义行
var valueline = d3.svg.line()
.interpolate(basis)
.x(function(d){ return x(d.date);})
.y(function(d){return y(d.close);});
//定义第二行
var valueline2 = d3.svg.line()
.interpolate(basis)
.x(function {return x(d.dopen);})
.y(function(d){return y(d.open);});
//定义第二行
var valueline3 = d3.svg.line()
.interpolate(basis)
.x(function {return x(d.dopen2);})
.y(function(d){return y(d.open2);});
//定义第二行
var valueline4 = d3.svg.line()
.interpolate(basis)
.x(function {return x(d.dopate3);})
.y(function(d){return y(d.open3);});
//添加svg画布
var svg = d3.select(#biggraph)
.append(svg)
.attr ,width + margin.left + margin.right)
.attr(height,height + margin.top + margin.bottom)
.append(g)
.attr (transform,translate(+ margin.left +,+ margin.top +));
//获取初始数据
d3.tsv(data / data2.tsv,function(error,data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = + d.close;
d.open = + d.open;
d.open2 = d.open2;
d.open3 = + d.open3;
});
//缩放数据的范围
x.domain(d3。 (数据,函数(d){return d.date;}));
y.domain([0,d3.max .open,d.open2,d.open3);})]);
//添加valueline路径
svg.append(path)
.attr (class,line)
.attr(d,valueline(data));
//添加valueline2路径
svg.append路径)
.attr(class,line2)
.style(stroke,red)
.attr(d,valueline2(data));
//添加valueline3路径
svg.append(path)
.attr(class,line3)
.style stroke,#FF6600)
.attr(d,valueline3(data));
//添加valueline4路径。
svg.append(path)
.attr(class,line4)
.style(stroke,green)
.attr d,valueline4(data));
//添加X轴
svg.append(g)
.attr(class,x axis)
.attr transform,translate(0,+ height +))
.call(xAxis);
//添加Y轴
svg.append(g)
.attr(class,y axis)
.call(yAxis );
});
// **更新数据部分(从onclick调用)
function updateData(){
//再次获取数据
d3。 tsv(data / data-alt2.tsv,function(error,data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = + d.close;
d.open = + d.open;
d.open2 = + d.open2;
d.open3 = + d.open3;
});
//再次扩展数据的范围
x.domain(d3.extent(data,function(d){return d.date;}) ;
y.domain([0,d3.max(data,function(d){return Math.max(d.close,d.open,d.open2,d.open3);}
//选择要应用我们的更改的部分
var svg = d3.select(#biggraph)。transition();
/ /改变
svg.select(。line)//改变行
.duration(750)
.attr(d,valueline(data));
svg.select(。line2)//改变行
.duration(750)
.attr(d,valueline2(data));
svg.select(。line3)//改变行
.duration(750)
.attr(d,valueline3(data));
svg.select(。line4)//改变行
.duration(750)
.attr(d,valueline4(data));
svg.select(。x.axis)//改变x轴
.duration(750)
.call(xAxis);
svg.select(。y.axis)//改变y轴
.duration(750)
.call(yAxis);
});
}
// **更新数据部分(从onclick调用)
函数revertData(){
//再次获取数据
d3.tsv(data / data2.tsv,function(error,data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = + d.close;
d.open = + d.open;
d.open2 = + d.open2;
d.open3 = + d.open3;
});
//再次扩展数据的范围
x.domain(d3.extent(data,function d){return d.date;});
y.domain([0,d3.max(data,function(d){return Math.max(d.close,d.open,d.open2 ,d.open3);})]);;
//选择要应用我们的更改的部分
var svg = d3.select(#biggraph)。transition ();
//进行更改
svg.select(。line)//更改行
.duration(750)
.attr d,valueline(data));
svg.select(。line2)//改变行
.duration(750)
.attr(d,valueline2数据));
svg.select(。line3)//改变行
.duration(750)
.attr(d,valueline3(data));
svg.select(。line4)//改变行
.duration(750)
.attr(d,valueline4(data));
svg.select(。x.axis)//改变x轴
.duration(750)
.call(xAxis);
svg.select(。y.axis)//改变y轴
.duration(750)
.call(yAxis);
});
}
// **更新数据部分(从onclick调用)
函数updateData48h(){
// Get数据再次
d3.tsv(data / data48h.tsv,function(error,data){
data.forEach(function(d){
d.date = parseDate .date);
d.close = + d.close;
d.open = + d.open;
d.open2 = + d.open2;
d.open3 = d.open3;
});
//再次扩展数据的范围
x.domain(d3.extent(data,function(d){return d.date;}));
y.domain([0,d3.max(data,function(d){return Math.max(d.close,d.open,d.open2,d.open3 );})]);
//选择要应用我们的更改的部分
var svg = d3.select(#biggraph)transition();
//进行更改
svg.select(。line)//更改行
.duration(750)
.attr(d,valueline (data));
svg.select(。line2)//更改行
.duration(750)
.attr(d,valueline2(data));
svg.select(。line3)//改变行
.duration(750)
.attr(d,valueline3(data));
svg.select(。line4)//改变行
.duration(750)
.attr(d,valueline4(data));
svg.select(。x.axis)//改变x轴
.duration(750)
.call(xAxis);
svg.select(。y.axis)//改变y轴
.duration(750)
.call(yAxis);
});
}
// **更新数据部分(从onclick调用)
函数updateData24h(){
//再次获取数据
d3.tsv(data / data24h.tsv,function(error,data){
data.forEach(function(d){
d.date = parseDate(d.date);
d.close = + d.close;
d.open = + d.open;
d.open2 = + d.open2;
d.open3 = + d。再次调整数据的范围
x.domain(d3.extent(data,function(d){return d.date;};
});
}));
y.domain([0,d3.max(data,function(d){return Math.max(d.close,d.open,d.open2,d.open3);} ]);
//选择要应用我们的更改的部分
var svg = d3.select(#biggraph)transition();
//进行更改
svg.select(。line)//更改行
.duration(750)
.attr(d,valueline(data)) ;
svg.select(。line2)//改变行
.duration(750)
.attr(d,valueline2(data));
svg.select(。line3)//改变行
.duration(750)
.attr(d,valueline3(data));
svg.select(。line4)//改变行
.duration(750)
.attr(d,valueline4(data));
svg.select(。x.axis)//改变x轴
.duration(750)
.call(xAxis);
svg.select(。y.axis)//改变y轴
.duration(750)
.call(yAxis);
});
}
任何线索都会很受欢迎
我发现了anwser的问题。这是同一页上另一个数据流的问题。重命名它已经解决了这个问题。
Hello i am stuck with a rather weird issue. I have a graph that works when its appended to the body. When i change this to appending to a div this happens: Normal ![normal state]http://imgur.com/DIsjkIl Appended to div ![div state]http://imgur.com/9ndyFlT
I noticed the axis arent drawn correctly but no clue how to fix that.
One time it stays normal and on update it becomes small with the correct axis.
My code:
// Set the dimensions of the canvas / graph
var margin = {top: 15, right: 10, bottom: 30, left: 50},
width = 400 - margin.left - margin.right,
height = 220 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Define the second line
var valueline2 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.open); });
// Define the second line
var valueline3 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.open2); });
// Define the second line
var valueline4 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.open3); });
// Adds the svg canvas
var svg = d3.select("#biggraph")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Get the initial data
d3.tsv("data/data2.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
d.open2 = +d.open2;
d.open3 = +d.open3;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open, d.open2, d.open3); })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the valueline2 path.
svg.append("path")
.attr("class", "line2")
.style("stroke", "red")
.attr("d", valueline2(data));
// Add the valueline3 path.
svg.append("path")
.attr("class", "line3")
.style("stroke", "#FF6600")
.attr("d", valueline3(data));
// Add the valueline4 path.
svg.append("path")
.attr("class", "line4")
.style("stroke", "green")
.attr("d", valueline4(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
// ** Update data section (Called from the onclick)
function updateData() {
// Get the data again
d3.tsv("data/data-alt2.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
d.open2 = +d.open2;
d.open3 = +d.open3;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open, d.open2, d.open3); })]);
// Select the section we want to apply our changes to
var svg = d3.select("#biggraph").transition();
// Make the changes
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".line2") // change the line
.duration(750)
.attr("d", valueline2(data));
svg.select(".line3") // change the line
.duration(750)
.attr("d", valueline3(data));
svg.select(".line4") // change the line
.duration(750)
.attr("d", valueline4(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
});
}
// ** Update data section (Called from the onclick)
function revertData() {
// Get the data again
d3.tsv("data/data2.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
d.open2 = +d.open2;
d.open3 = +d.open3;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open, d.open2, d.open3); })]);;
// Select the section we want to apply our changes to
var svg = d3.select("#biggraph").transition();
// Make the changes
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".line2") // change the line
.duration(750)
.attr("d", valueline2(data));
svg.select(".line3") // change the line
.duration(750)
.attr("d", valueline3(data));
svg.select(".line4") // change the line
.duration(750)
.attr("d", valueline4(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
});
}
// ** Update data section (Called from the onclick)
function updateData48h() {
// Get the data again
d3.tsv("data/data48h.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
d.open2 = +d.open2;
d.open3 = +d.open3;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open, d.open2, d.open3); })]);
// Select the section we want to apply our changes to
var svg = d3.select("#biggraph").transition();
// Make the changes
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".line2") // change the line
.duration(750)
.attr("d", valueline2(data));
svg.select(".line3") // change the line
.duration(750)
.attr("d", valueline3(data));
svg.select(".line4") // change the line
.duration(750)
.attr("d", valueline4(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
});
}
// ** Update data section (Called from the onclick)
function updateData24h() {
// Get the data again
d3.tsv("data/data24h.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
d.open2 = +d.open2;
d.open3 = +d.open3;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open, d.open2, d.open3); })]);
// Select the section we want to apply our changes to
var svg = d3.select("#biggraph").transition();
// Make the changes
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".line2") // change the line
.duration(750)
.attr("d", valueline2(data));
svg.select(".line3") // change the line
.duration(750)
.attr("d", valueline3(data));
svg.select(".line4") // change the line
.duration(750)
.attr("d", valueline4(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
});
}
Any clues would be much appriciated
I have found the anwser to the problem. It was an issue with another data stream on the same page. Renaming it has solved the issue.
这篇关于D3 JS附加到div奇怪的结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!