D3 линейная диаграмма обрезанная ось y

Question

Я пытаюсь построить диаграмму в d3, и она легко работает в скрипке. Однако, когда я вставляю код в свою фактическую реализацию, полученный элемент svg разрезается сверху и слева. Я играл с размером и полями, но почему-то ничего не меняется.

Вот скрипка с рабочим кодом и вставили SVG, как моя фактическая реализация обеспечивает: http://jsfiddle.net/16jjdyt1/5/

здесь картина выхода я получаю: А вот код от моего фактического реализация.

function updateGraph(data) { 
    var selector = "#" + id + " .chart svg"; 

    // NOTE this is a hack, sometimes chart is null! 
    if (!_.isEmpty(data.primary)) { 

    d3.selectAll(selector + " > *").remove(); 


    var width = 400, 
     height = 140; 
    var margin = {top: 30, right: 60, bottom: 30, left: 50} 

    var parseDate = d3.time.format('%d.%m.%y %H:%M').parse; 
    var x = d3.time.scale().range([0, width]); 
    var y0 = d3.scale.linear().range([height, 0]); 
    var y1 = d3.scale.linear().range([height, 0]); 


    // ticks 
    var xAxis = d3.svg.axis().scale(x) 
     .orient("bottom").tickFormat(function(d) { 
      return d3.time.format('%d.%m.%y %H:%M')(new Date(d)) 
     }) 
     .ticks(5); // TODO change this 

    var yAxisLeft = d3.svg.axis().scale(y0) 
     .orient("left").tickFormat(d3.format(',.2f')); 

    var yAxisRight = d3.svg.axis().scale(y1) 
     .orient("right").tickFormat(d3.format(',.2f')); 

    // function for left aligned lines 
    var valueline = d3.svg.line() 
     .x(function(d) { return x(d.x); }) 
     .y(function(d) { return y0(d.y); }) 
     .interpolate("cardinal").tension(0.8); 

    // function for right aligned lines 
    var valueline2 = d3.svg.line() 
     .x(function(d) { return x(d.x); }) 
     .y(function(d) { return y1(d.y); }) 
     .interpolate("cardinal").tension(0.8); 

d3.select(selector) 
     .attr("width", width + margin.left + margin.right + 20) 
     .attr("height", height + margin.top + margin.bottom +20) 
     .append("g") 
      .attr("transform","translate(" + margin.left + "," + margin.top + ")"); 


    // TODO refactor this 
    var x_values = []; 
    var y0_values = []; 
    var y1_values = []; 



    _.each(data.primary, function(d){ 
     _.each(d.values, function(f){ 
      x_values.push(f.x); 
      y0_values.push(f.y); 
     }); 
    }); // TODO refactor this! 

    _.each(data.secondary, function(d){ 
     _.each(d.values, function(f){ 
      x_values.push(f.x); 
      y1_values.push(f.y); 
     }); 
    }); // TODO refactor this! 

    x.domain(d3.extent(x_values)); // scale x axis 
    y0.domain(d3.extent(y0_values)); // scale y axis 1 
    y1.domain(d3.extent(y1_values)); // scale y axis 2 


    // Add left aligned graphs 
    data.primary.forEach(function(d){ 
    d3.select(selector).append("path") 
     .style("stroke", d.color) 
     .attr("d",valueline(d.values)); 
    }); 

    // Add right aligned graphs 
    data.secondary.forEach(function(d){ 
    d3.select(selector).append("path") 
     .style("stroke", d.color) 
     .attr("d",valueline2(d.values)); 
    }); 



    d3.select(selector).append("g")   // Add the X Axis 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 


    d3.select(selector).append("g") // Add first y axis 
     .attr("class", "y axis") 
     .call(yAxisLeft); 

    d3.select(selector).append("g") // Add second y axis 
     .attr("class", "y axis") 
     .attr("transform", "translate(" + width + " ,0)") 
     .call(yAxisRight); 


    } 
} 

return timechart; 
    }; 

Я не знаю, где эта ошибка может возникнуть, поэтому я рад за любые намеки на это. Спасибо заранее!

Answer 1

Ваши пути, оси и т.д. должны сидеть внутри g элемента, как это ::

<g transform="translate(50,30)"> 
    // in 'test', chart goes here 
</g> 

Однако в вас «выход» версии, диаграммы, все элементы после g:

<g transform="translate(50,30)"></g> 
// in 'output', chart goes here 

в коде для вас фактической реализации, сначала добавить, что g к selector (который является элементом SVG) ...

d3.select(selector) 
    .attr("width", width + margin.left + margin.right + 20) 
    .attr("height", height + margin.top + margin.bottom +20) 
    .append("g") 
     .attr("transform","translate(" + margin.left + "," + margin.top + ")"); 

И затем вы добавляете другие биты, которые будут идти после, а не вложенными, переведенный g, как это:

d3.select(selector).append("g")   // Add the X Axis 
    .attr("class", "x axis") 

Чтобы избежать этого, одна вещь, которую вы могли бы сделать, это определить id для g, и выберите, что использовать, чтобы добавить ось и пути к, например:

d3.select(selector) 
    .attr("width", width + margin.left + margin.right + 20) 
    .attr("height", height + margin.top + margin.bottom +20) 
    .append("g") 
     .attr("transform","translate(" + margin.left + "," + margin.top + ")") 
     .attr("id", "selector_g"; 

, а затем

d3.select("#selector_g").append("g")   // Add the X Axis 
    .attr("class", "x axis")