d3.js force layoutのimageがiOSで表示されない時の対処法

結論:xとyは以下の方法でサイズを設定せよ!

.attr("x", function(d) { return -25;})
.attr("y", function(d) { return -25;})
        


例)
var images = nodeEnter.append("svg:image")
.attr("xlink:href",  function(d) { return d.img;})
.attr("x", function(d) { return -25;})
.attr("y", function(d) { return -25;})
.attr("height", 50)
.attr("width", 50);
        

参考:http://bl.ocks.org/eesur/be2abfb3155a38be4de4



force layout 元々のソースコード


こちらの記事を参考にコードを書いていました

https://qiita.com/hirodos/items/47d53ab606390af97533
この記事を少し改良した元々のコード

node.append("svg:image")
    .attr('xlink:href', function(d) {if (typeof d.image === "undefined") {return  "https://applimura.com/wp-content/uploads/2019/08/twittericon13.jpg" } else { return d.image }})
    .attr('x',-22)
    .attr('y',-22)
    .attr('width',45)
    .attr('height',45);
        




force layout 変更後のコード


node.append("svg:image")
    .attr('xlink:href', function(d) {if (typeof d.image === "undefined") {return  "https://applimura.com/wp-content/uploads/2019/08/twittericon13.jpg" } else { return d.image }})
    .attr('x',function(d) { return -22;})
    .attr('y',function(d) { return -22;})
    .attr('width',45)
    .attr('height',45);
        




いかにして修正方法を発見するのか?

1,iphoneやipadのみforce layoutの画像が表示されないことに気づく
2,一方でしっかりとイメージが表示されているサイトもあることに気づく
3,force layoutのsソースコードをよく見る(特に、問題となる画像部分)
4,不審な関数に気づく

不審な関数とは、冒頭のあげた以下のコード
.attr("x", function(d) { return -25;})
.attr("y", function(d) { return -25;})
        
どんな引数dが入るにせよ、返す値は必ず-25です
それはつまり、-25を直接記述するコードを書くのと同じです
しかしそれしか違いがないのでためらわず改変
するとあら不思議
















tags

d3.js
force layout
javascritp

popular page

プログラミング言語の学ぶ順番について(初心者から中級者へ)後編

Pythonで入門書が終わった後(中級者)に勧めたい技術3選

urllibとbeautifulSoupでtwitterのツイート数,フォロー数,フォロワー数,いいね数,を取得する

another page

itパスポートの勉強メモをまとめてみる(個人用)

プログラミング言語の学ぶ順番について(初心者から中級者へ)後編

Pythonで入門書が終わった後(中級者)に勧めたい技術3選

CONTACT ME RIGHT NOW!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

5th Avenue, 987
38399, New York,
USA.

Tel. 9888-4394
Mail. hello@example.com
Skype. ExampleSkype

Your message has been sent. Thank you!

© Copyrights Studio. All Rights Reserved

Created with Studio template by TemplateMag
/* フッター/コピーライトのスタイル指定 */ footer { padding: 40px 16px; } footer .copyright small { color: #868686; font-size: 1.4rem; font-family: "Ubuntu Condensed", sans-serif; letter-spacing: .05em; }