0

この質問のフォローアップ: Drawing sequence logos in D3

とても良い例でした (お時間をいただきありがとうございます)。

文字の代わりに画像を使用して変更しようとしていましたが（cmonkeyが示唆しているように）、高さのサイズが変更されたため、これまでのところうまくいきませんでした。（私が望むように高さを伸ばしません）。

どんな洞察も大歓迎です。

column
    .selectAll("images")
    .data( function(d) { return d.bits; })
    .enter().append("svg:image")
    .attr("xlink:href", function(e){ 
        if (e.letter == "A"){return "a.png"}
        if (e.letter == "T"){return "t.png"}
        if (e.letter == "G"){return "g.png"}
        if (e.letter == "C"){return "c.png"}
        ;})
    .attr("y", function(e) { return y(e.y0); })
    .attr("x", function(e) { return x(e.position); })
    .attr( "height", function(e) { return ( y(e.y0) - y(e.y1) ) ; } )
    .attr( "width", function(e) { return ( x.rangeBand() ) ; } );

洞察はありますか？

4

1 に答える 1

0

文字pngの元の高さで画像を追加し、変換translateを使用して所定の位置に移動し、scale引き伸ばす必要があります。

良い説明はここにあります。

非常に基本的な例を次に示します。

http://jsfiddle.net/Yb2kr/

var svg = d3.selectAll("body").append("svg")
        .attr("height",600)
        .attr("width",600)

svg.append("svg:image")
   .attr("xlink:href", "https://encrypted.google.com/intl/en_ALL/images/logos/images_logo_lg.gif")
   .attr("width", 200)
   .attr("height", 100)

svg.append("svg:image")
   .attr("xlink:href", "https://encrypted.google.com/intl/en_ALL/images/logos/images_logo_lg.gif")
   .attr("width", 200)
   .attr("height", 100)
   .attr("transform", "translate(0,100) scale(1,2)")

画像がより良い解決策であるかどうかはわかりません..画像がどれだけ引き伸ばされたかによっては、画像が歪む可能性があります. 一方、フォントはシャープさを維持する必要があります。

于 2013-04-22T03:31:32.527 に答える