Javascript 背景图像（img，0，0，w，h）； var canvasdata=canvas.toDataURL（“image/png”）； var pngimg=''； var a=document.createElement（“a”）； a、 下载=“sample.png”； a、 href=拉票数据； a、 单击（）； }; }; } dsPieChart（）； var数据集条形图=[ {“组”：“全部”、“类别”：“季节性”、“度量”：63850.4963}， {“组”：“全部”、“类别”：“全年”、“度量”：78258.0845}， {组：“苹果”，类别：“季节性”，测量值：19441.5648}， {组：“苹果”，类别：“全年”，测量值：25922.0864}， {组：“芒果”，类别：“季节性”，测量值：9720.7824}， {组：“芒果”，类别：“全年”，计量：6480.5216}， ] ; //设置初始组值 var group=“全部”； 已选择功能数据集（组）{ var-ds=[]； 对于（数据集条形图中的x）{ if（datasetBarChart[x].group==group）{ ds.push（datasetBarChart[x]）； } } 返回ds； } 函数dsBarChartBasics（）{ var margin={顶部：30，右侧：5，底部：20，左侧：50}， 宽度=500-边距。左侧-边距。右侧， 高度=250-margin.top-margin.bottom， colorBar=d3.scale.category20（）， barPadding=1 ; 返回{ 保证金：保证金， 宽度：宽度， 高度:高度,， 颜色条：颜色条， barPadding：barPadding } ; } 函数dsBarChart（）{ var firstDatasetBarChart=DataSetBarSelected（组）； var basics=dsBarChartBasics（）； var保证金=基本保证金， 宽度=基本宽度， 高度=基本高度， colorBar=basics.colorBar， barPadding=basics.barPadding ; var xScale=d3.scale.linear（） .domain（[0，firstDatasetBarChart.length]） .范围（[0，宽度]） ; //创建线性y比例 //用途：无论数据是什么，条形图都应适合svg区域；条形图不应 //高于svg高度。因此需要缩放传入数据以适应svg区域。 var yScale=d3.scale.linear（） //使用max函数派生域的端点（数据集的最大值） //不要将数据集的最小值用作域的最小值，否则将看不到第一个栏 .domain（[0，d3.max（firstDatasetBarChart，函数（d）{返回d.measure；}）]） //由于坐标始终是从左上角定义的，因此条形图的y位置 //是svg高度减去数据值。因此基本上从顶部开始绘制条形图。 //通过范围函数计算y位置的步骤 .范围（[高度，0]） ; //创建SVG元素 var svg=d3。选择（#条） .append（“svg”） .attr（“宽度”，宽度+边距。左侧+边距。右侧） .attr（“高度”，高度+边距。顶部+边距。底部） .attr（“id”、“条形图”） ; var svg=svg .附加（“g”） .attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”） ; svg.selectAll（“rect”） .数据（firstDatasetBarChart） .输入（） .append（“rect”） .attr（“x”，函数（d，i）{ 返回xScale（i）； }) .attr（“宽度”，宽度/firstDatasetBarChart.length-barPadding） .attr（“y”，函数（d）{ 返回yScale（d.measure）； }) .attr（“高度”，功能（d）{ 返回高度yScale（d.measure）； }) .attr（“填充”、“蓝色”） ; //将y标签添加到绘图 svg.selectAll（“文本”） .数据（firstDatasetBarChart） .输入（） .append（“文本”） .文本（功能（d）{ 返回格式整数（d3圆（d度量））； }) .attr（“文本锚定”、“中间”） //将x位置设置为每根钢筋的左边缘加上钢筋宽度的一半 .attr（“x”，函数（d，i）{ 返回（i*（width/firstDatasetBarChart.length））+（（width/firstDatasetBarChart.length-barPadding）/2）； }) .attr（“y”，函数（d）{ 返回yScale（d.measure）+14； }) .attr（“类”、“亚克斯”） /*移动到CSS .attr（“字体系列”、“无衬线”） .attr（“字体大小”，“11px”） .attr（“填充”、“白色”） */ ; //将x标签添加到图表 var xLabels=svg .附加（“g”） .attr（“变换”、“平移”（“+margin.left+”、“+（margin.top+height）+”）） ; xLabels.selectAll（“text.xAxis”） .数据（firstDatasetBarChart） .输入（） .append（“文本”） .text（函数（d）{返回d.category；}） .attr（“文本锚定”、“中间”） //将x位置设置为每根钢筋的左边缘加上钢筋宽度的一半 .attr（“x”，函数（d，i）{ 返回（i*（width/firstDatasetBarChart.length））+（（width/firstDatasetBarChart.length-barPadding）/2）； }) .attr（“y”，15） .attr（“类”、“xAxis”） //.attr（“样式”，“字体大小：12；字体系列：Helvetica，无衬线”） ; //头衔 svg.append（“文本”） .attr（“x”，（宽度+边距.左+边距.右）/2） .attr（“y”，15） .attr（“类别”、“头衔”） .attr（“文本锚定”、“中间”） .案文（“整体”） ; //创建导出按钮 d3.选择（“#条”） .append（“按钮”） .html（“导出”） .打开（“单击”，svgToCan）； } dsBarChart（）； var w=100，//或svg宽度的任意值 h=100； 函数svgToCan（）{ //选择第一个svg元素 调试器； var svg=d3。选择（“svg”）[0][0]， img=新图像（）， serializer=新的XMLSerializer（）， svgStr=serializer.serializeToString（svg）； data='data:image/svg+xml；base64'+window.btoa（svgStr）； var canvas=document.createElement（“canvas”）； 画布宽度=400； 画布高度=400； context=canvas.getContext（“2d”）； img.src=数据； img.onload=函数（）{ 背景图像（img，0，0，w，h）； var canvasdata=canvas.toDataURL（“image/png”）； var pngimg=''； var a=document.createElement（“a”）； a、 下载=“sample.png”； a、 href=拉票数据； a、 单击（）； }; };

在

svgToCan（）

函数中使用

selectAll（）

方法而不是

select（）

，在那里您将获得所有SVG列表

用以下行替换函数svgToCan（）{}

var arr=[];
    for(var i=0;i<d3.selectAll("svg").length;i++){
        arr=d3.selectAll("svg")[i];
        console.log(d3.selectAll("svg")[i]);
    }
     for(var j=0;j<arr.length;j++)
        var svg = arr[j],
        img = new Image(),
        serializer = new XMLSerializer(),
        svgStr = serializer.serializeToString(svg);