SVGでチェックボックスを使いたい時はforeignObjectのタグを使う

<script type="text/javascript">
    var svg = d3.select("body").append("svg")
        .attr("width", 100)
        .attr("height", 100);

    svg.append("foreignObject")
        .attr("width", 100)
        .attr("height", 100)
        .append("xhtml:body")
        .html("<form><input type=checkbox id=check /></form>")
        .on("click", function(d, i){
            console.log(svg.select("#check").node().checked);
        });
</script>


http://bl.ocks.org/biovisualize/3085882
https://developer.mozilla.org/ja/docs/Web/SVG/Element/foreignObject

d3.jsonを一時的にハードコードしたデータでテストしたい時

こういうAjaxでのリクエストを、

d3.json("/test/this/url", function(json) {
// ToDo: ------> Write something here..
}

こういう感じで変えると、バックエンドがない場合でもテストできる。

var testData = '{test:[1,2,3]}';
var json = JSON.parse( testData );

http://stackoverflow.com/questions/10934853/d3-js-loading-json-without-a-http-get

d3はmin, maxで最大値や最小値で配列からデータを取得できる

var data = [1, 2, 3];
d3.min(data) ---> 1
d3.max(data) ---> 3

http://stackoverflow.com/questions/11488194/how-to-use-d3-min-and-d3-max-within-a-d3-json-command

d3で子のHTMLの子エレメントとSVGの子エレメントを削除する方法はちょっと違う

HTMLの要素の場合：
d3.select("div.parent").html("");

SVGの要素の場合：
d3.select("g.parent").selectAll("*").remove();


http://stackoverflow.com/questions/14422198/how-do-i-remove-all-children-elements-from-a-node-and-them-apply-them-again-with

Blocked loading mixed active contentが出た時に気をつけること

FirefoxのFirebugで"Blocked loading mixed active content..."というエラーが出てるので調べてみると、どうやらCDNを使ってHTMLページでインポートしてるJS/CSSファイルが読み込まれていない。

さらに掘り下げてみると、httpsで読み込んでるページからhttpでこれらのCDNからJS/CSSを読み込もうとするとエラーが出てるようだ。

What is Mixed Content?When a user visits a page served over HTTP, their connection is open for eavesdropping and man-in-the-middle (MITM) attacks. When a user visits a page served over HTTPS, their connection with the web server is authenticated and encrypted with SSL and hence safeguarded from eavesdroppers and MITM attacks.However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. When an HTTPS page has HTTP content, we call that content “mixed”. The webpage that the user is visiting is only partially encrypted, since some of the content is retrieved unencrypted over HTTP. The Mixed Content Blocker blocks certain HTTP requests on HTTPS pages.

引用：
http://stackoverflow.com/questions/18251128/why-am-i-suddenly-getting-a-blocked-loading-mixed-active-content-issue-in-fire

要するに、HTTPSのページにHTTPリクエストで呼ばれているコンテンツがあると、それを”mixied（混在した）”コンテンツとみなし、MITM攻撃の被害になりえるのでやめて下さいとFirefoxが新しいバージョンではエラーとして表示してくれているようだ。

一般的な解決策は意外と簡単で、インポートしてるファイル(js/css）の構文をhttpからhttpsに変えてやればいい。もしくは//みたいな書き方でURLをブラウザが自動判別してくれるということ。

http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just

追加：

ただ、CDNによってはhttpからhttpsになぜかリクエストが変わってくれなかったので、そういうケースは泣く泣くCDNを使わずローカルにファイルを保存したりして回避した。

JavaScriptでhtmlのDOMエレメントのクラス名を得るには？

JavaScriptでhtmlのDOMエレメントのクラス名を得るには？

document.getElementById('divId').className.split(/\s+/);

参考
http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery

JavaScriptでhtmlのページにパラメーターを追加して更新する方法

JavaScriptでhtmlのページをリフレッシュする方法

var url = window.location.href;    
if (url.indexOf('?') > -1){
   url += '&param=1'
}else{
   url += '?param=1'
}
window.location.href = url;

参考
http://stackoverflow.com/questions/5997450/append-to-url-and-refresh-page

JavaScriptでparseIntの戻り値がNaNの場合の対処方法

var s = '';

var num = parseInt(s) || 0;

http://stackoverflow.com/questions/6736476/javascript-parseint-return-nan-for-empty-string

jQueryでバインドさせたいファンクションにパラメータを渡すには？

jQueryでバインドさせたいファンクションにパラメータを渡すには、event.dataを使えるよう。例えば、

element.bind('click', {'id':3}, function(event) {
    console.log(event.data.id);
});

のようにしてパラメータとして渡せます。

参考リンク
http://stackoverflow.com/questions/3994527/passing-parameters-to-click-bind-event-in-jquery

jQueryでブラウザで表示中のビューポートの情報を得るには？

getViewport = function() {
    var $w = $(window);
    return {
        l: $w.scrollLeft(),
        t: $w.scrollTop(),
        w: $w.width(),
        h: $w.height()
    }
}

参考リンク
http://stackoverflow.com/questions/10324753/jquery-function-to-get-the-curren-viewport

d3でcssのクラスを複数追加するには

d3.selectAll(".someDiv").attr("test1 test2");

参考リンク
http://stackoverflow.com/questions/13188125/d3-add-multiple-classes-with-function

MavenでJavascriptやStylesheetのファイルはYUI compressor Maven MOJOを使う

MavenでJavascriptやStylesheetのファイルはYUI compressor Maven MOJOを使うと便利です。JSやCSSファイルをデフォルトで-minという名前で圧縮してくれるし、aggregationタグでは圧縮したファイルを一括してくれる。

http://alchim.sourceforge.net/yuicompressor-maven-plugin/index.html

ハマったところと言えば、Mavenのライフサイクルのフェーズがprepare-packageじゃないと思った順序でpom.xmlの内容が動作してくれなかった点。

jQueryとAjaxを使ってフォームのデータを送信する時、たくさんのエレメントがあると面倒くさいのでserialize()を使う。

<form id="someForm">...</form>

<script>
  $.ajax({
      url: 'someurl',
      type: 'post',
      data: $('#someForm').serialize()
  }) ;
</script>

こんな感じ。

http://stackoverflow.com/questions/5004233/capture-all-of-the-forms-data-and-submit-it-to-a-php-script-jquery-ajax-post

JavaScriptでNullチェックをするには？

if (variable != null)

http://stackoverflow.com/questions/12271750/how-to-check-if-a-variable-is-both-null-and-or-undefined-in-javascript