{"id":5126,"date":"2016-08-17T17:13:50","date_gmt":"2016-08-17T08:13:50","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=5126"},"modified":"2021-06-02T12:51:40","modified_gmt":"2021-06-02T03:51:40","slug":"post-5126","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3v4\/5126","title":{"rendered":"\u3010D3.js\u3011\u30c1\u30e3\u30fc\u30c8\u3092SVG\u3084PNG\u3067\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u307e\u3067\u306e\u9577\u3044\u9053\u306e\u308a"},"content":{"rendered":"

\u7d50\u8ad6<\/h2>\n

\u5148\u306b\u7d50\u8ad6\u3060\u3051\u66f8\u3044\u3066\u304a\u304d\u307e\u3059\u3002
\n\u753b\u50cf\u306b\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u305b\u308b\u306e\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u3067SVG\u3092\u30e9\u30b9\u30bf\u306b\u5909\u63db\u3059\u308b\u65b9\u304c\u305a\u30fc\u3068\u697d\u3002<\/p>\n

\u76ee\u6a19<\/h2>\n

\u30fbD3.js\u3067\u51fa\u529b\u3057\u305f\u30c1\u30e3\u30fc\u30c8\u3092SVG\u3084PNG\u3067\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3002
\n\u30fb\u30c0\u30a6\u30ed\u30fc\u30c9\u3057\u305f\u30c1\u30e3\u30fc\u30c8\u306b\u306fCSS\u306e\u5185\u5bb9\u3082\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3002<\/p>\n

SVG\u30fbPNG\u5171\u901a<\/h2>\n

\u30c1\u30e3\u30fc\u30c8\u306b\u9069\u7528\u3055\u308c\u3066\u3044\u308bCSS\u306e\u5185\u5bb9\u304c\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u306b\u3082\u53cd\u6620\u3055\u308c\u308b\u3088\u3046\u306b\u3001\u3059\u3079\u3066\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u3092SVG\u306e\u5c5e\u6027(atribute)\u306b\u5909\u63db\u3057\u307e\u3059\u3002
\n\u305d\u306e\u969b\u3001\u5143\u306e\u30c1\u30e3\u30fc\u30c8\u306b\u306f\u624b\u3092\u3064\u3051\u305f\u304f\u306a\u3044\u306e\u3067\u3001\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5b9f\u884c\u6642\u306b\u3044\u3063\u305f\u3093\u30c1\u30e3\u30fc\u30c8\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u3059\u3079\u3066\u30b3\u30d4\u30fc\u3057getComputedStyle\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u30c1\u30e3\u30fc\u30c8\u3092\u69cb\u6210\u3059\u308b\u8981\u7d20\u306e\u7b97\u51fa\u30b9\u30bf\u30a4\u30eb\u3092atribute\u306b\u5909\u63db\u3057\u307e\u3059\u3002
\n\u305d\u306e\u307e\u307e\u3067\u306f\u6570\u304c\u591a\u3059\u304e\u308b\u306e\u3067\u3001\u7a7a\u306eSVG\u3092\u4f5c\u6210\u3057\u3066\u5fc5\u8981\u306a\u30b9\u30bf\u30a4\u30eb\u3092\u62bd\u51fa\u3059\u308b\u305f\u3081\u306e\u30d5\u30a3\u30eb\u30bf\u30fc\u3068\u3057\u3066\u4f7f\u3044\u307e\u3059\u3002<\/p>\n

\u3076\u3063\u3061\u3083\u3051\u3053\u306e\u8fba\u306f<\/a>SVG Crowbar<\/a>\u306e\u30b3\u30fc\u30c9\u3092\u4e38\u30d1\u30af\u30ea\u3057\u3066\u307e\u3059\u3002<\/p>\n

var _emptySvg,_emptySvgDeclarationComputed\nvar _copyChart\n\nfunction createEmptySVG() {\n    _emptySvg = window.document.createElementNS(prefix.svg, 'svg')\n    window.document.body.appendChild(_emptySvg)\n    _emptySvgDeclarationComputed = getComputedStyle(_emptySvg)\n    \n}\n\nfunction createCopySVG() {\n    _copyChart = d3.select(\"body\")\n        .append(\"div\")\n        .html(svg.innerHTML)\n        .node()            \n    \n}\n\nfunction traverse(obj){\n    var tree = []\n    tree.push(obj)\n    visit(obj)\n    function visit(node) {\n        if (node && node.hasChildNodes()) {\n            var child = node.firstChild\n            while (child) {\n                if (child.nodeType === 1 && child.nodeName != 'SCRIPT'){\n                    tree.push(child)\n                    visit(child)\n                }\n                child = child.nextSibling\n            }\n        }\n    }\n    return tree\n}\n\nfunction explicitlySetStyle(element) {\n    var cSSStyleDeclarationComputed = getComputedStyle(element)\n    var attributes = Object.keys(element.attributes).map(function(i){ return element.attributes[i].name } )          \n    var i, len\n    var computedStyleStr = \"\"\n    for (i=0, len=cSSStyleDeclarationComputed.length; i<len; i++)=\"\" {=\"\" var=\"\" key=\"cSSStyleDeclarationComputed[i]\" value=\"cSSStyleDeclarationComputed.getPropertyValue(key)\" if(!attributes.some(function(k){=\"\" return=\"\" k=\"==\" key})=\"\" &&=\"\" value!=\"=_emptySvgDeclarationComputed.getPropertyValue(key))\" computedstylestr+=\"key+\":\"+value+\";\"\" }=\"\" element.setattribute('style',=\"\" computedstylestr)=\"\" createemptysvg()=\"\" createcopysvg()=\"\" allelements=\"traverse(_copyChart)\" \u30b3\u30d4\u30fc\u3057\u305fsvg\u304b\u3089\u5168\u3066\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u53d6\u308a\u51fa\u3059=\"\" i=\"allElements.length\" while=\"\" (i--){=\"\" explicitlysetstyle(allelements[i])=\"\" \u30a8\u30ec\u30e1\u30f3\u30c8\u306bcss=\"\" -=\"\"> atribute\u306e\u5909\u63db\u3092\u9069\u7528\u3059\u308b\n}\n<\/len;><\/pre>\n
\u307e\u305f\u3001svg\u306e\u4e2d\u306b\u753b\u50cf\u306a\u3069\u3092image\u30bf\u30b0\u3067\u633f\u5165\u3057\u3066\u3044\u308b\u5834\u5408\u3001data URI \u30b9\u30ad\u30fc\u30e0\u5316\u3057\u3066svg\u5185\u306b\u57cb\u3081\u8fbc\u3080\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
download SVG<\/h2>\n
SVG\u8981\u7d20\u3092XMLSerializer\u3092\u4f7f\u3063\u3066\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u3057\u3001\u3055\u3089\u306bblob\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u308b\u5f62\u306b\u3057\u3066\u3044\u307e\u3059\u3002
\nIE\u306e\u5834\u5408\u306fmsSaveBlob\u95a2\u6570\u3092\u4f7f\u3044\u3001\u305d\u308c\u4ee5\u5916\u306e\u30d6\u30e9\u30a6\u30b6\u306e\u5834\u5408\u306fdownload\u5c5e\u6027\u3092\u4ed8\u3051\u305fa\u8981\u7d20\u306bblob\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
function downloadSVG(source) {\n    var filename = \"chart.svg\";\n    var svg = d3.select(source).select(\"svg\")\n        .attr(\"xmlns\", prefix.svg)\n        .attr(\"version\", \"1.1\")            \n        .node()\n    \n    var blobObject = new Blob([doctype +  (new XMLSerializer()).serializeToString(svg)], { \"type\" : \"text\/xml\" })   \n    \n    if (navigator.appVersion.toString().indexOf('.NET') > 0){ \/\/IE hack\n        window.navigator.msSaveBlob(blobObject, filename)\n\n    }else {\n        var url = window.URL.createObjectURL(blobObject)                \n        var a = d3.select(\"body\").append(\"a\")\n        \n        a.attr(\"class\", \"downloadLink\")\n            .attr(\"download\", \"chart.svg\")\n            .attr(\"href\", url)\n            .text(\"test\")\n            .style(\"display\", \"none\")\n            \n            a.node().click()\n\n        setTimeout(function() {\n          window.URL.revokeObjectURL(url)\n          a.remove()\n        }, 10)            \n    }\n}    \n<\/pre>\n
\u30fb\u554f\u984c\u70b9
\nsafari\u3067\u306f\u3001a\u8981\u7d20\u306edownload\u5c5e\u6027\u304c\u5b9f\u88c5\u3055\u308c\u3066\u3044\u306a\u3044\u305f\u3081\u3001\u3053\u306e\u65b9\u6cd5\u3060\u3068\u30da\u30fc\u30b8\u9077\u79fb\u304c\u767a\u751f\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u307e\u305b\u3093\u3002\uff08\u30d5\u30a1\u30a4\u30eb\u304c\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u958b\u304b\u308c\u308b\u307e\u3059\uff09<\/p>\n
downloadPNG<\/h2>\n
SVG\u3068\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u305b\u308b\u3088\u308a\u4e00\u624b\u9593\u304b\u304b\u308a\u307e\u3059\u3002
\n\u307e\u305a\u3001\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u3057\u305fSVG\u3092Data URI scheme\u306b\u5909\u63db\u3057img\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u8aad\u307f\u8fbc\u307e\u305b\u3001\u305d\u308c\u3092canvas\u306bdrawImage\u4f7f\u3063\u3066\u8ee2\u5199\u3059\u308b\u3053\u3068\u3067\u30e9\u30b9\u30bf\u30e9\u30a4\u30ba\u3057\u307e\u3059\u3002
\n\u305d\u306e\u5f8c\u3001canvas\u306etoDataURL\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u518d\u5ea6Data URI scheme\u306b\u5909\u63db\u3057\u3001\u753b\u50cf\u3068\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u305b\u307e\u3059\u3002<\/p>\n
function downloadPNG(source) {\n    var filename = \"chart.png\";\n     \n    var svg = d3.select(source).select(\"svg\")\n         .attr(\"xmlns\", prefix.svg)\n         .attr(\"version\", \"1.1\")\n         .node()\n                             \n    var data_uri =  \"data:image\/svg+xml;utf8,\" +   encodeURIComponent( (new XMLSerializer()).serializeToString(svg) )\n                 \n    var canvas = d3.select(\"body\").append(\"canvas\")\n         .attr(\"width\", w)\n         .attr(\"height\", h)\n         .style(\"display\", \"none\")\n     \n    var context = canvas.node().getContext(\"2d\")\n\n\n    var download = function() {\n         context.drawImage(img, 0, 0) \/\/IE error\n            \n        var url = canvas.node().toDataURL(\"image\/png\")\n        var a = d3.select(\"body\").append(\"a\").attr(\"id\", \"downloadLink\")\n        \n        a.attr(\"class\", \"downloadLink\")\n            .attr(\"download\", filename)\n            .attr(\"href\", url)\n            .text(\"test\")\n            .style(\"display\", \"none\")\n            \n            a.node().click()\n    \n        setTimeout(function() {\n            window.URL.revokeObjectURL(url)\n            canvas.remove()\n            a.remove()\n        }, 10)  \n             \n         \n    }                \n         \n    var img = new Image()\n    img.src = data_uri\n    img.addEventListener('load', download, false)                \n\n     \n}\n<\/pre>\n
\u30fb\u554f\u984c\u70b9 safari
\ndownloadSVG\u3068\u540c\u3058\u304f\u3001\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u305a\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u958b\u304b\u308c\u3066\u3057\u307e\u3046\u3002<\/p>\n
\u30fb\u554f\u984c\u70b9 IE
\nsvg\u3092Data URI scheme\u306b\u5909\u63db\u3057img\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u8aad\u307f\u8fbc\u307e\u305b\u308b\u969b\u3001base64\u306b\u5909\u63db\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\n\uff08\u4ed6\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u305d\u306e\u307e\u307e\u6e21\u305b\u308b\uff09
\nbase64\u306b\u5909\u63db\u3059\u308bwindow.btoa\u306f\u3001\u30e6\u30cb\u30b3\u30fc\u30c9\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u305f\u3081\u5143svg\u306b\u65e5\u672c\u8a9e\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u3068\u30a8\u30e9\u30fc\u3068\u306a\u308a\u307e\u3059\u3002\u5f93\u3063\u3066\u3001\u5225\u9014base64 encoder\u3092\u5b9f\u88c5\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\u3055\u3089\u306bimg\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u8aad\u307f\u8fbc\u307e\u305b\u308b\u3053\u3068\u306b\u6210\u529f\u3057\u305f\u3068\u3057\u3066\u3082\u3001canvas\u306edrawImage\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066img\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8ee2\u5199\u3059\u308b\u969b\u306bSecurity Error\u304c\u3067\u307e\u3059\u3002
\n\u3053\u308c\u306b\u3064\u3044\u3066\u306f\u56de\u907f\u7b56\u304c\u7121\u3044\u305f\u3081\u3001IE\u306e\u307f\u5225\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u304c\u5fc5\u8981\u3068\u306a\u308a\u307e\u3059\u3002
\n\u4eca\u56de\u306f\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30e9\u30a4\u30d6\u30e9\u30ea\u306ecanvg.js<\/a>\u3092\u4f7f\u3044IE\u306e\u6642\u3060\u3051SVG\u3092\u30d1\u30fc\u30b9\u3057\u3066camvas\u306b\u4e00\u304b\u3089\u63cf\u753b\u3059\u308b\u3068\u3044\u3046\u65b9\u6cd5\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002
\n\u4ee5\u4e0b\u306fIE\u5bfe\u7b56\u3092\u65bd\u3057\u305fdownloadPNG<\/p>\n
function downloadPNG(source) {\n    var filename = \"chart.png\";\n            \n    var svg = d3.select(source).select(\"svg\")\n        .attr(\"xmlns\", prefix.svg)\n        .attr(\"version\", \"1.1\")\n        .node()\n                                    \n    var data_uri =  \"data:image\/svg+xml;utf8,\" +   encodeURIComponent( (new XMLSerializer()).serializeToString(svg) )\n                        \n    var canvas = d3.select(\"body\").append(\"canvas\")\n        .attr(\"id\", \"drawingArea\")\n        .attr(\"width\", w)\n        .attr(\"height\", h)\n        .style(\"display\", \"none\")\n            \n    var context = canvas.node().getContext(\"2d\")\n\n\n    var download = function() {\n            \n        if (navigator.appVersion.toString().indexOf('.NET') > 0){\n            \/\/IE\u5bfe\u7b56\n\n            canvg(document.getElementById('drawingArea'), (new XMLSerializer()).serializeToString(svg))\n    \n            var dataURI2Blob = function(dataURI, dataTYPE) {\n                var binary = atob(dataURI.split(',')[1]), array = [];\n                for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));\n                return new Blob([new Uint8Array(array)], {type: dataTYPE});\n            }                   \n                \n            var data_uri = canvas.node().toDataURL(\"image\/png\")\n            var blobObject = dataURI2Blob(data_uri, \"image\/png\")\n                \n            window.navigator.msSaveBlob(blobObject, filename)\n    \n        }else {\n    \n            context.drawImage(img, 0, 0) \n            var url = canvas.node().toDataURL(\"image\/png\")\n            var a = d3.select(\"body\").append(\"a\").attr(\"id\", \"downloadLink\")\n                    \n            a.attr(\"class\", \"downloadLink\")\n                .attr(\"download\", filename)\n                .attr(\"href\", url)\n                .text(\"test\")\n                .style(\"display\", \"none\")\n                \n                a.node().click()\n        \n            setTimeout(function() {\n              window.URL.revokeObjectURL(url)\n              canvas.remove()\n              a.remove()\n            }, 10);            \n        }\n                    \n                \n    }\n                \n    var img = new Image()\n    img.src = data_uri\n    if (navigator.appVersion.toString().indexOf('.NET') > 0){\n         \/\/IE\u3067onload\u304c\u767a\u706b\u3057\u306a\u3044\u554f\u984c\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u306e\u51e6\u7406\n        d3.select(img).attr(\"onload\", download)\n    }else{\n        img.addEventListener('load', download, false)                \n    }\n            \n            \n}<\/pre>\n
\u307e\u305f\u3001img\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306eonload\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u706b\u3057\u306a\u304b\u3063\u305f\u308a\u3001\u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\u304c\u7d42\u308f\u308b\u524d\u306b\u767a\u706b\u3057\u3066\u3057\u307e\u3063\u305f\u308a\u3068\u4e0d\u5b89\u5b9a\u306a\u90e8\u5206\u3082\u3002<\/p>\n
\u30b5\u30f3\u30d7\u30eb<\/h2>\n
bl.ocks.org\u306b\u30b5\u30f3\u30d7\u30eb\u3092\u63b2\u8f09\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n
Chart Downloader \u03b1 – bl.ocks.org<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u7d50\u8ad6 \u5148\u306b\u7d50\u8ad6\u3060\u3051\u66f8\u3044\u3066\u304a\u304d\u307e\u3059\u3002 \u753b\u50cf\u306b\u3057\u3066\u30c0\u30a6…<\/p>\n","protected":false},"author":1,"featured_media":5127,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[],"class_list":["post-5126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3v4","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=5126"}],"version-history":[{"count":2,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5126\/revisions"}],"predecessor-version":[{"id":7291,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5126\/revisions\/7291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/5127"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=5126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=5126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=5126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}