Блог

Мы пытаемся импортировать svg, созданный из графика, созданного с помощью D3js, в полноэкранный холст FabricJS.

График генерируется с помощью следующего кода:

 var  w = 600;
var  h = 400;
var margin = 40;
var dataLength = 10;

var rmdObj = function() { return {r:R(100), value:R(100)} };
var rmdData = createData.curry(rmdObj);
var data1 = rmdData(dataLength);    
var data2 = rmdData(dataLength);    


var svg = d3.select('#elsvg');
var group = svg.append('g')
    .attr("transform", "translate ("   [ 10, 0 ]   ")" );

var xScale = d3.scale.linear().domain( [0, dataLength] ).range( [margin, w-margin] );   
var yScale = d3.scale.linear().domain( [0, d3.max( data1.concat(data2), F('value') ) ] ).range( [h-margin, margin] )    

var valueLine = d3.svg.line()
    .x(function(d, i){ return xScale(i) })
    .y(function(d){ return yScale(d.value)});

var xAxisStyle = d3.svg.axis().scale(xScale).orient('bottom').ticks(5);
var xAxis = group.append('g').attr({
    'class': 'x axis',
    'transform': 'translate ('   [0, h-margin]   ')'
    })
    .call(xAxisStyle);

var yAxisStyle = d3.svg.axis().scale(yScale).orient('left').ticks(5);
var yAxis = group.append('g').attr({
    'class': 'y axis',
    'transform': 'translate ('   [margin, 0]   ')'
    })
    .call(yAxisStyle);


var line1 = group.append('path')
    .attr({
        class:'line1',
        d:valueLine(data1),
        fill:'none',
        stroke: 'blue',
        'stroke-width': 3
    })

var line1 = group.append('path')
    .attr({
        class:'line2',
        d:valueLine(data2),
        fill:'none',
        stroke: 'red',
        'stroke-width': 3
    })
  

И результат в формате svg:

Результат в svg!

Но когда я импортирую этот svg на холст из ткани (больше, чем размер svg), результат будет:

 var SVGstring = document.getElementById('ghostLayer').innerHTML;  //SVG取得

console.log(SVGstring);

fabric.loadSVGFromString(SVGstring , function(objects, options) {

    console.log(options);

    options.top = 0;
    options.left = 0;
    options.width = 600;
    options.height = 400;
    options.selection = true;

    var svgGroups = fabric.util.groupSVGElements(objects, options);

    //onsole.log(JSON.stringify(svgGroups))
    self.Bbcanvas.add(svgGroups).renderAll();   

});
  

Результат при импорте в canvas!

svg создается при нажатии кнопки, а затем импортируется холст svg. Есть ли какой-либо способ сохранить правильную структуру svg или настроить строки?

Спасибо!