d3/jsの網膜マップタイルをStamenやCartoDBで使用する

Question

網膜ディスプレイを検出して拡張タイルをユーザに提供するコードを修正する方法を知りたいと思います。

雄しべタイル：：

.attr("xlink:href", function(d) { return "http://tile.stamen.com/toner-lite/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) 

CartoDBタイル：

.attr("xlink:href", function(d) { return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".basemaps.cartocdn.com/light_all/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) 

おかげで、私は通常、タイルのために呼び出すために、このコードを使用しています！

Answer 1

OKは、それが使用して作業しました：

function isRetina() { 
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);} 

function isRetinaDisplay() { 
if (window.matchMedia) { 
    var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)"); 
    if (mq && mq.matches || (window.devicePixelRatio > 1)) { 
     return true; 
    } else { 
     return false;} 
} 
} 

image.enter().append("image") 
.attr("xlink:href", function(d) { 
    if (isRetinaDisplay) { 
     return "http://tile.stamen.com/toner-lite/" + d[2] + "/" + d[0] + "/" + d[1] + "@2x.png"; 
    } else { 
     return "http://tile.stamen.com/toner-lite/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; 
    } 
}) 

これは雄しべタイルのためです。