harada のアーカイブ

D3.jsで、X軸の項目が表示幅より長い場合は斜めに表示する

2017年6月22日

`translate(" + this.getBBox().height/2*-1 + "," + this.getBBox().height + ")rotate(-45)`で斜めにすることができます。 たとえば以下のように記述します。 ``` var adjust_width = 800;//グラフの描画幅 var x = d3.scale.ordinal().rangeRoundBands([0, adjust_width], width_propori
続きを読む

ChartJS:目盛りとグラフの間にpaddingを設定する

2017年6月15日

以下のオプションを設定することで、目盛りとグラフの間にpaddingを設定できます。 ``` var options = { scales: { yAxes: [{//Y軸に設定したい場合 ticks: { padding: 100 } }], xAxes: [{//X軸に設定したい場合 ticks: { padding
続きを読む

ChartJS:Y軸の目盛りに小数点を出さないようにする

2017年6月15日

こちらもオプション設定で解決するようです。 ``` var options = { scales: { yAxes: [{ ticks: { beginAtZero: true, userCallback: function(label, index, labels) { if (Math.floor(label) === label) {
続きを読む

ChartJS:x軸の目盛りの最大表示数と表示角度を設定する

2017年6月14日

ChartJSでグラフを作成して、X軸の値の数が多い場合、自動で斜めに表示されます。 これをまっすぐのまま表示したい場合オプション設定で以下のように指定します。 ``` var myChart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ ticks: {
続きを読む

chart.js:縦のラインを全部非表示にする

2017年6月13日

Chart.jsに以下のオプションを設定することで、縦のメモリ、始まりの縦線を含めてすべて非表示にできます。 ``` options: { scales: { xAxes: [{ display: true, stacked: false, gridLines: { display: false } }],
続きを読む

CakePHPで複数行のHTMLを指定した位置で読み込むようにする

2017年6月13日

複数行のHTMLなどを特定の位置に差し込みたい場合の記述方法です。 差し込みたい位置に以下のような記述をおきます。 ``` ``` 差し込みたい内容を以下のタグで括って記述します。 ``` 差し込みたい内容 ``` 参考:https://book.cakephp.org/2.0/ja/views.html#extending-views
続きを読む

D3.jsを利用したSVGにテキストを3つ並べる

2017年6月8日

[表示サンプルはこちら](http://jsdo.it/haradaaa/AMuo) ### HTML ``` ``` ### JavaScript ``` //テキストを3つ並べる var width = 400; var height = 400; var svgtext = d3.select("#text") .append("svg") .attr("width",width) .attr("height",hei
続きを読む

SVGの要素で指定できるタグのメモ

2017年6月7日

メモしておきます。 指定する要素によっては使えないこともあるかもしれません。 ``` .attr("text-anchor", "middle")//テキストの表示位置(start,middle,end) .attr("fill", '#fff')//塗りつぶしの色 .attr("font-size", '110%')//フォントのサイズ .attr("width", 300)//要素の幅 .attr("height", 100)//要素の高さ .
続きを読む

[VSCode]Visual Studio CodeでSassをコンパイルする方法の覚書

2017年6月5日

あらかじめ、NPM、Node.jsをインストールしておきます。 (1). VS Codeを開き、**Shift+Command+P** ショートカットで「コマンドパレット」を開きます。 (2). `Configure Task Runner`と入力して、Enterで選択します。 (3). 次に表示される画面で「Others」を選択します。 (4). 以下の内容を記入したサンプルの「tasks.json」ファイルを「.vscode」フォルダーに作
続きを読む

JavaScript:要素の高さを取得する

2017年5月30日

要素のIDを指定して、JavaScript高さを取得する方法です。 ``` var divHeight; var obj = document.getElementById('ID名'); if(obj.offsetHeight) { divHeight=obj.offsetHeight; } else if(obj.style.pixelHeight) { divHeight=obj.style.pixelHeight; } `
続きを読む

JavaScript:画像のURLから高さと幅を取得する

2017年5月30日

以下の記述で画像のURLから高さと幅が取得できます。 ``` var img = new Image(); img.src = '画像のURL';//高さと幅を取得したいURLを入力 var img_width = img.width; // 幅 var img_height = img.height; // 高さ ``` 参考:[[JavaScript] 画像のオリジナル サイズを取得する 最もシンプルな方法](http
続きを読む

CakePHPでjavaScriptとCSSファイルを指定した位置で読み込むようにする

2017年5月22日

以下のように記述すると、それを記述した位置でそのまま読み込まれてしまうため、思い通りの動きにならないことがあります。 ``` ``` そこで出力したい位置に以下のような指定をしておくことで、その場所に出力させることができます。 例:出力したい位置 ``` ``` 例:出力させたい内容 ``` ``` 参考:[【CakePHP】JSやCSSファイルを任意の位置で読み込む](http://www.p-
続きを読む

flexboxで要素を真ん中に寄せて並べる

2017年5月12日

## justify-content: center;とjustify-content: space-between;を指定する場合の例 [デモはこちら](http://jsdo.it/haradaaa/uy74/edit) ### CSS ``` .flex1 { display: flex; display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap
続きを読む

CSS:background指定をまとめる場合の注意

2017年5月11日

``` .bg { background-color: rgba(0, 0, 0, 0.3); background-image: url("../img/bg.jpg"); background-repeat: no-repeat; background-position: center 30%; background-size: cover; } ``` このように背景画像を指定している場合、まとめて書くと以下のような記述になりま
続きを読む

D3.js:指定した範囲でrect要素を切り抜く

2017年5月1日

以下のように切り抜きたい範囲を指定して、要素に指定することで指定した範囲でrect要素を切り抜けるようです。 ``` //切り抜く範囲を指定 svg.append("clipPath") .attr("id", "clip-rect") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height",
続きを読む

Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる

2017年5月1日

以前は[WOW.jsを利用して簡単にアニメーションを導入する](http://hacknote.jp/archives/1122/)という記事のように、WOW.jsと[Animate.css](https://daneden.github.io/animate.css/)でアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。 そのためjQueryプラグインの[inview.js](https://github.com/
続きを読む

D3.jsのグラフを角丸にする(ドーナツグラフの場合)

2017年4月28日

角丸にしたいドーナツグラフの`d3.svg.arc()`などの後ろに以下を追加するだけで角丸にできるようです。 ``` .cornerRadius(20) ``` 追加例: ``` var arc_simple = d3.svg.arc() .innerRadius(radius - 20) .outerRadius(radius - 10) .cornerRadius(20) .startAngle(-0.
続きを読む

MacをSierraにアップデート後にSassが利用できなくなった場合にすること

2017年4月25日

YosemiteとSierraの間にはEl Capitanがあるのですが、確かそれはまるまる飛ばしてYosemiteからSierraにアップデートしました。 するとその後しばらくたって何らかのタイミングからこれまで利用できていたSassが利用できなくなってしまいました。 ぐぐってみるとどうやらSassとCompassがなくなってしまったようです。 参考:[Mac OS X El Capitan にしたらSassとCompassがなくなっていた](http:/
続きを読む

CSS:rgba指定を使わずに背景画像を透過する

2017年4月20日

``というブロックに透過した背景画像を重ねたい場合は以下のようにCSSを記述します。 rgbaを重ねる方法だと、背景画像の上にさらに透過した背景画像を重ねるのが難しいため以下の方法を利用します。 ### CSS ``` .bgimage { display: block; position: relative; z-index: 1; } .bgimage:after { content: ""; background-i
続きを読む

CSSでテキスト選択中の背景色と文字色を変更する

2017年4月20日

``` ::-moz-selection { background-color: #f06292; color: #fff; } ::selection { background-color: #f06292; color: #fff; } ```
続きを読む