Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Canvas 如何将3Djs图形正确导入FabricJS画布_Canvas_Svg_D3.js_Fabricjs - Fatal编程技术网

Canvas 如何将3Djs图形正确导入FabricJS画布

Canvas 如何将3Djs图形正确导入FabricJS画布,canvas,svg,d3.js,fabricjs,Canvas,Svg,D3.js,Fabricjs,我们正在尝试将从使用D3js创建的图形创建的svg导入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)

我们正在尝试将从使用D3js创建的图形创建的svg导入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大小)时,结果是:

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

});
!

单击按钮时生成svg,然后导入svg画布。有没有办法保持svg的正确结构或调整行

谢谢