JSFiddle - React, Tailwind, and code Playground

by kenta_torii

HTML

<div>動的SVG

http://senta.me/blog/2015-03-08/html5-code-playground/
https://d3js.org/
https://jsfiddle.net/　アカウント作成
D3.js
グラフ作成

チャートをSVGやPNGでダウンロード


codepen jsfiddle

http://blockbuilder.org/
http://bl.ocks.org/shimizu/c5c8ea2add273c83995983c540a53f2d
https://shimz.me/blog/d3v4/5126</div>

<div id="chart"></div>
<button id="downloadSVG">download SVG</button>


<script src="http://gabelerner.github.io/canvg/canvg.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>

<script>
!(function(){
		
    //ランダムデータセット
    var data = ["アメリカ", "日本", "フランス", "イギリス", "スイス"].map(function(d){
            var r = ~~(Math.random() * 100)
            if (Math.random() > 0.2){
                var cos = Math.sin(r * Math.PI / 180)                
            }else{
                var cos = -Math.sin(r * Math.PI / 180)                                
            }
            var value = cos*100
            
            return {"国名":d, "値":value}
    })

    //barChartモジュール初期設定
    var BarChart = createVBarChart()
        .margin({top:40, left:100, bottom:40, right:100})
        .x(function(d){ return d["国名"] })
        .y(function(d){ return d["値"] })
        .xAxisLabel("国名")
        .xAxisLabelOption({y:"-0.5em"})
        .yAxisGridVisible(true)
        .yAxisLabel("値")
        .yAxisLabelOption({y:"-0.5em", "text-anchor":"middle"})
        
    alert('aaa')  
    
    //downloaderモジュールのインスタンス生成
    var downloader = createDownloader()
    
  
    //セレクターにbarChartモジュールとdownloaderモジュールを適用
    var selector = d3.selectAll("#chart")
        .datum(data)
        .call(BarChart)
        .call(downloader)
        
        
    d3.select("#downloadSVG").on("click", selector.downloadSVG )
    
}()) 

</script>

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin:  0px;
}
#chart {
    width: 900px;
    height: 450px;
}

.vbarChart .bar {
    fill:blue;
}

/* axis */
.vbarChart .axis {
}
.vbarChart .axis .domain {
	stroke: #333333;
}
.vbarChart .tick line {
	stroke: #333333;
	stroke-width: 1px;
}
.vbarChart .tick text {
	fill: #333333;
	font-size: 14px;
	letter-spacing: .05em;
}

/* grid */
.vbarChart .grid line {
	stroke: #cccccc;
	stroke-dasharray: 3,3;
}

/* label */
.vbarChart .label {
	font-size: 12px;
	font-weight: normal;
	letter-spacing: .05em;
}

JavaScript

function createVBarChart(){
  
    var _chartWidth,_chartHeight
    
    
    var _margin = {top:0, left:0, bottom:0, right:0};

    var _x = function(){ return d },
        _y = function(){ return d }

    var _xScale = d3.scaleBand(),
        _yScale = d3.scaleLinear()
    
    var _xScaleDomain, _yScaleDomain,
        _xScaleRange, _yScaleRange
    
    var _xScalePaddingInner = 0.1,
        _xScalePaddingOuter = 0.5
    
    var _xAxisLabel,_yAxisLabel
    
    
    var _xAxisGridVisible = false,
        _yAxisGridVisible = false
    
    
    var _xAxisLabelOption = {x:0, y:0, "text-anchor":"middle", "dominant-baseline":"auto"},
        _yAxisLabelOption = {x:0, y:0, "text-anchor":"start", "dominant-baseline":"auto"}
    
    
    var _yTickValues, _xTickValues 
        
    
    var _transitionObject = d3.transition().duration(0)
    
    var _responsive = true
    
    
    var _dispatch = d3.dispatch("mouseover","mousemove", "mouseout", "click");
    
    
    function exports(_selection) {
        
        
        _selection.each(function(_data){
            var isHash = function(value) {
                return value.toString() === '[object Object]';
            }
            var isArray = Array.isArray || function(value) {    
                return value.toString() === '[object Array]';
            }
            
            var parentNode = _selection.node()
            var selectedSVG = _selection.selectAll("svg")
                .data(["dummy"])
                

            var newSVG = selectedSVG.enter().append("svg")
                       
            var svg = selectedSVG.merge(newSVG)
            
            svg.attr("class", "vbarChart")
            
            
                            
            var axisLayer = svg.append("g").classed("axisLayer", true)
            var chartLayer = svg.append("g").classed("chartLayer", true)

            
            var parentWidth, parentHeight
            
            main(_data)
            
  ...