그래프를 svg (d3.js)에서 jpg로 내보낼 때 검은 색 영역

Question

SVG (d3.js를 통해 얻음)에서 javascript를 사용하여 JPG 이미지로 그래프를 내보내려고합니다.

실제로 최종 이미지에는 그림이 제대로 표시되지 않지만 그래프의 선을 둘러싸는 검은 색 영역이 그려집니다. Here 두 이미지입니다. 페이지의 상단에는 SVG가 표시되는 반면 최종 JPG 이미지가 표시됩니다.

root_node = d3.select("svg") 
     .attr("version", 1.1) 
     .attr("xmlns", "http://www.w3.org/2000/svg") 
     .node(); 

    s_xml = (new XMLSerializer).serializeToString(root_node); 

    var imgsrc = 'data:image/svg+xml,'+ s_xml; 
    var img = '<img src="'+imgsrc+'">'; 

    var canvas = document.createElement("canvas"); 

    canvas.width = 1600; 
    canvas.height = 600; 

    context = canvas.getContext("2d"); 

    var image = new Image; 
    image.src = imgsrc; 
    image.onload = function() { 
     context.drawImage(image, 0, 0); 
     context.fillStyle = 'white'; 
     context.globalCompositeOperation = "destination-over"; 
     context.fillRect(0, 0, canvas.width, canvas.height); 

     var canvasdata = canvas.toDataURL("image/jpeg"); 
     var jpgimg = '<img src="'+canvasdata+'">'; 
     d3.select("body").append("svgdataurl").html(jpgimg); 

    }); 

누군가가 잘못된 색상 변환의 이유를 알고 : 내가 쓴

코드는 다음과 같다? 미리 감사드립니다!

Answer 1

D3 코드의 꺾은 선형 차트에 CSS를 직접 지정해야합니다.

lineChart.append("path") 
.attr("class", "lineChart") 
.attr("stroke-width", 1) 
.attr("fill","none") 
.attr("d", valueline(lineChartData));