D3 JS append to div weird result

Question

Привет, я застрял в довольно странной проблеме. У меня есть график, который работает, когда он присоединяется к телу. Когда я изменить это добавление в DIV это происходит: Normal [нормальное состояние] http://imgur.com/DIsjkIl приложены к Div [ДИВО состояние] http://imgur.com/9ndyFlT

Я заметил, что ось Арента обращается правильно, но не догадывается, как исправить это! ,

Один раз он остается нормальным и при обновлении он становится маленьким с правильной осью.

Мой код:

// 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); 

    }); 
} 

Все ключи будут гораздо appriciated

Answer 1

Я нашел anwser проблемы. Это была проблема с другим потоком данных на той же странице. Переименование это решило проблему.