1. ホーム
  2. 質問と答え
  3. djグラフの画像をdjangoのウェブサイトに保存するには？

djグラフの画像をdjangoのウェブサイトに保存するには？

2016-05-10 5 views
2

DjangoとD3の新機能です。私は、複数の動的d3グラフを作成できるDjango Webサイトを作成しました。グラフをグラフとして保存してレポート作成に使用できるようにする機能を追加したいと思います。私はまた、参照の両方からdjグラフの画像をdjangoのウェブサイトに保存するには？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>D3: A starting point for interactivity</title> 
    <script type="text/javascript" src="../d3/d3.v3.js"></script> 
<style type="text/css"> 

    .graph1 { 
      float : left ; 
      height : 400px; 
      width : 600px; 
      font: 20px sans-serif; 
      text-align: left; 
      margin-left : 20px; 
     border : 1px solid black; 
} 


.graph2 { 
    float : right ; 
    margin-right : 20px ; 
    width : 600px; 
    height : 400px; 
    border : 1px solid black; 
    overflow: scroll; 
    border : 1px solid black; 
    } 


.button1{ 
    float :left ; 
} 

.button2{ 
    float :right ; 
}  
</style> 
</head> 
<body> 

<div id="area1" class="graph1"></div> 
<div id="area2" class="graph2"></div> 
<button id="save" class="button1">Save as Image</button> 
<canvas id="canvas1" width="960" height="500" style="display:none"> </canvas> 
<button id="save1" class="button2">Save as Image</button> 
<canvas id="canvas2" width="960" height="500" style="display:none"></canvas> 
<script type="text/javascript"> 

     //Width and height 
     var w = 600; 
     var h = 400; 

     var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
         11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 

     var xScale = d3.scale.ordinal() 
         .domain(d3.range(dataset.length)) 
         .rangeRoundBands([0, w], 0.05); 

     var yScale = d3.scale.linear() 
         .domain([0, d3.max(dataset)]) 
         .range([0, h]); 

     //Create SVG element 
     var svg1 = d3.select("#area1") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     //Create bars 
     svg1.selectAll("rect") 
      .data(dataset) 
      .enter() 
      .append("rect") 
      .attr("x", function(d, i) { 
       return xScale(i); 
      }) 
      .attr("y", function(d) { 
       return h - yScale(d); 
      }) 
      .attr("width", xScale.rangeBand()) 
      .attr("height", function(d) { 
       return yScale(d); 
      }) 
      .attr("fill", function(d) { 
       return "rgb(0, 0, " + (d * 10) + ")"; 
      }); 

     //Create labels 
     svg1.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function(d) { 
       return d; 
      }) 
      .attr("text-anchor", "middle") 
      .attr("x", function(d, i) { 
       return xScale(i) + xScale.rangeBand()/2; 
      }) 
      .attr("y", function(d) { 
       return h - yScale(d) + 14; 
      }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "11px") 
      .attr("fill", "white"); 

d3.select("#save").on("click", function(){ 
    var html = d3.select("svg") 
     .attr("version", 1.1) 
     .attr("xmlns", "http://www.w3.org/2000/svg") 
     .node().parentNode.innerHTML; 

//console.log(html); 
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); 
var img = '<img src="'+imgsrc+'">'; 

//d3.select("#svgdataurl").html(img); 
var canvas = document.getElementById("canvas1"), 
context = canvas.getContext("2d"); 

var image = new Image; 
image.src = imgsrc; 
image.onload = function() { 
    context.drawImage(image, 0, 0); 

    var canvasdata = canvas.toDataURL("image/png"); 

    var pngimg = '<img src="'+canvasdata+'">'; 
    //d3.select("#pngdataurl").html(pngimg); 

    var a = document.createElement("a"); 
    a.download = "sample1.png"; 
    a.href = canvasdata; 
     document.body.appendChild(a); 
    a.click(); 
}; 

}); 
//pie chart 

     //Width and height 
     var w = 380; 
     var h = 380; 

     var dataset = [ 5, 10, 20, 45, 6, 25 ]; 

     var outerRadius = w/2; 
     var innerRadius = 0; 
     var arc = d3.svg.arc() 
         .innerRadius(innerRadius) 
         .outerRadius(outerRadius); 

     var pie = d3.layout.pie(); 

     //Easy colors accessible via a 10-step ordinal scale 
     var color = d3.scale.category10(); 

     //Create SVG element 
     var svg = d3.select("#area2") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     //Set up groups 
     var arcs = svg.selectAll("g.arc") 
         .data(pie(dataset)) 
         .enter() 
         .append("g") 
         .attr("class", "arc") 
         .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); 

     //Draw arc paths 
     arcs.append("path") 
      .attr("fill", function(d, i) { 
       return color(i); 
      }) 
      .attr("d", arc); 

     //Labels 
     arcs.append("text") 
      .attr("transform", function(d) { 
       return "translate(" + arc.centroid(d) + ")"; 
      }) 
      .attr("text-anchor", "middle") 
      .text(function(d) { 
       return d.value; 
      }); 

d3.select("#save1").on("click", function(){ 
var html = d3.select("svg") 
    .attr("version", 1.1) 
    .attr("xmlns", "http://www.w3.org/2000/svg") 
    .node().parentNode.innerHTML; 

//console.log(html); 
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); 
var img = '<img src="'+imgsrc+'">'; 

//d3.select("#svgdataurl").html(img); 
var canvas = document.getElementById("canvas2"), 
context = canvas.getContext("2d"); 

var image = new Image; 
image.src = imgsrc; 
image.onload = function() { 
    context.drawImage(image, 0, 0); 

    var canvasdata = canvas.toDataURL("image/png"); 

    var pngimg = '<img src="'+canvasdata+'">'; 
    //d3.select("#pngdataurl").html(pngimg); 

    var a = document.createElement("a"); 
    a.download = "sample2.png"; 
    a.href = canvasdata; 
     document.body.appendChild(a); 
    a.click(); 
}; 

}); 


    </script> 
</body>

のための私のコードを見つけるtutorials として、以下のリンクを使用しています

は、私が最初の画像を保存することができる午前ボタンとして保存します。私はd3/svg要素を適切に選択できないと思う。あなたのd3.select("#save1").on("click"で

出典

2016-05-10 pankaj jha

答えて

2

おかげで、あなたのSVGセレクタが間違っています。この：

var html = d3.select("svg") 
    ...

は常にページの最初svg要素を選択します。 AREA2のIDを使用してdivの子供のsvgを選択します

var html = d3.select("#area2>svg") 
    ...

：あなたのような何かを必要としています。

全コード：

：コメント

あなたがキャンバスに、それを "描く" ために必要な背景を設定するための

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>D3: A starting point for interactivity</title> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 

 
    <style type="text/css"> 
 

 
    .graph1 { 
 
      float : left ; 
 
      height : 400px; 
 
      width : 600px; 
 
      font: 20px sans-serif; 
 
      text-align: left; 
 
      margin-left : 20px; 
 
     border : 1px solid black; 
 
} 
 

 

 
.graph2 { 
 
    float : right ; 
 
    margin-right : 20px ; 
 
    width : 600px; 
 
    height : 400px; 
 
    border : 1px solid black; 
 
    overflow: scroll; 
 
    border : 1px solid black; 
 
    } 
 

 

 
.button1{ 
 
    float :left ; 
 
} 
 

 
.button2{ 
 
    float :right ; 
 
}  
 
    </style> 
 
    </head> 
 

 
    <body> 
 
    <div id="area1" class="graph1"></div> 
 
    <div id="area2" class="graph2"></div> 
 
    <button id="save" class="button1">Save as Image</button> 
 
    <canvas id="canvas1" width="960" height="500" style="display:none"></canvas> 
 
    <button id="save1" class="button2">Save as Image</button> 
 
    <canvas id="canvas2" width="960" height="500" style="display:none"></canvas> 
 
    <script type="text/javascript"> 
 

 
     //Width and height 
 
     var w = 600; 
 
     var h = 400; 
 

 
     var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
 
         11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 
 

 
     var xScale = d3.scale.ordinal() 
 
         .domain(d3.range(dataset.length)) 
 
         .rangeRoundBands([0, w], 0.05); 
 

 
     var yScale = d3.scale.linear() 
 
         .domain([0, d3.max(dataset)]) 
 
         .range([0, h]); 
 

 
     //Create SVG element 
 
     var svg1 = d3.select("#area1") 
 
        .append("svg") 
 
        .attr("width", w) 
 
        .attr("height", h); 
 

 
     //Create bars 
 
     svg1.selectAll("rect") 
 
      .data(dataset) 
 
      .enter() 
 
      .append("rect") 
 
      .attr("x", function(d, i) { 
 
       return xScale(i); 
 
      }) 
 
      .attr("y", function(d) { 
 
       return h - yScale(d); 
 
      }) 
 
      .attr("width", xScale.rangeBand()) 
 
      .attr("height", function(d) { 
 
       return yScale(d); 
 
      }) 
 
      .attr("fill", function(d) { 
 
       return "rgb(0, 0, " + (d * 10) + ")"; 
 
      }); 
 

 
     //Create labels 
 
     svg1.selectAll("text") 
 
      .data(dataset) 
 
      .enter() 
 
      .append("text") 
 
      .text(function(d) { 
 
       return d; 
 
      }) 
 
      .attr("text-anchor", "middle") 
 
      .attr("x", function(d, i) { 
 
       return xScale(i) + xScale.rangeBand()/2; 
 
      }) 
 
      .attr("y", function(d) { 
 
       return h - yScale(d) + 14; 
 
      }) 
 
      .attr("font-family", "sans-serif") 
 
      .attr("font-size", "11px") 
 
      .attr("fill", "white"); 
 

 
d3.select("#save").on("click", function(){ 
 
    var html = d3.select("svg") 
 
     .attr("version", 1.1) 
 
     .attr("xmlns", "http://www.w3.org/2000/svg") 
 
     .node().parentNode.innerHTML; 
 

 
//console.log(html); 
 
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); 
 
var img = '<img src="'+imgsrc+'">'; 
 

 
//d3.select("#svgdataurl").html(img); 
 
var canvas = document.getElementById("canvas1"), 
 
context = canvas.getContext("2d"); 
 
context.strokeStyle = "black"; 
 
context.rect(0,0,w,h); 
 
context.fill(); 
 

 
var image = new Image; 
 
image.src = imgsrc; 
 
image.onload = function() { 
 
    context.drawImage(image, 0, 0); 
 

 
    var canvasdata = canvas.toDataURL("image/png"); 
 

 
    var pngimg = '<img src="'+canvasdata+'">'; 
 
    //d3.select("#pngdataurl").html(pngimg); 
 

 
    var a = document.createElement("a"); 
 
    a.download = "sample1.png"; 
 
    a.href = canvasdata; 
 
     document.body.appendChild(a); 
 
    a.click(); 
 
}; 
 

 
}); 
 
//pie chart 
 

 
     //Width and height 
 
     var w = 380; 
 
     var h = 380; 
 

 
     var dataset = [ 5, 10, 20, 45, 6, 25 ]; 
 

 
     var outerRadius = w/2; 
 
     var innerRadius = 0; 
 
     var arc = d3.svg.arc() 
 
         .innerRadius(innerRadius) 
 
         .outerRadius(outerRadius); 
 

 
     var pie = d3.layout.pie(); 
 

 
     //Easy colors accessible via a 10-step ordinal scale 
 
     var color = d3.scale.category10(); 
 

 
     //Create SVG element 
 
     var svg = d3.select("#area2") 
 
        .append("svg") 
 
        .attr("width", w) 
 
        .attr("height", h); 
 

 
     //Set up groups 
 
     var arcs = svg.selectAll("g.arc") 
 
         .data(pie(dataset)) 
 
         .enter() 
 
         .append("g") 
 
         .attr("class", "arc") 
 
         .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); 
 

 
     //Draw arc paths 
 
     arcs.append("path") 
 
      .attr("fill", function(d, i) { 
 
       return color(i); 
 
      }) 
 
      .attr("d", arc); 
 

 
     //Labels 
 
     arcs.append("text") 
 
      .attr("transform", function(d) { 
 
       return "translate(" + arc.centroid(d) + ")"; 
 
      }) 
 
      .attr("text-anchor", "middle") 
 
      .text(function(d) { 
 
       return d.value; 
 
      }); 
 

 
d3.select("#save1").on("click", function(){ 
 
var html = d3.select("#area2>svg") 
 
    .attr("version", 1.1) 
 
    .attr("xmlns", "http://www.w3.org/2000/svg") 
 
    .node().parentNode.innerHTML; 
 

 
//console.log(html); 
 
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); 
 
var img = '<img src="'+imgsrc+'">'; 
 

 
//d3.select("#svgdataurl").html(img); 
 
var canvas = document.getElementById("canvas2"), 
 
context = canvas.getContext("2d"); 
 
context.strokeStyle = "black"; 
 
context.rect(0,0,w,h); 
 
context.fill(); 
 

 
var image = new Image; 
 
image.src = imgsrc; 
 
image.onload = function() { 
 
    context.drawImage(image, 0, 0); 
 

 
    var canvasdata = canvas.toDataURL("image/png"); 
 

 
    var pngimg = '<img src="'+canvasdata+'">'; 
 
    //d3.select("#pngdataurl").html(pngimg); 
 

 
    var a = document.createElement("a"); 
 
    a.download = "sample2.png"; 
 
    a.href = canvasdata; 
 
     document.body.appendChild(a); 
 
    a.click(); 
 
}; 
 

 
}); 
 

 

 
    </script> 
 
    </body> 
 

 
</html>

EDITS 

var canvas = document.getElementById("canvas2"), context.strokeStyle = "black"; context.rect(0,0,w,h); context.fill();

上記のスニペットを実行して、これを追加しました。

出典

2016-05-10 13:03:21 Mark

+0

お返事ありがとうございます。実際に私のページには2つ以上のグラフがあります。私は、3番目のd3グラフのようにvar html = d3.select（ "＃area3> svg"）を定義できると仮定します。 –

+1

@pankajjha、はい。 – Mark

+0

キャンバスの背景を白または白く設定することは可能ですか？現在、d3グラフの空白は小さなブロックで占められています。ありがとう –

関連する問題

 関連する問題