D3.js 跟进：使用图像绘制-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() ) ; } );

---

有什么见解吗？

您需要添加具有字母png原始高度的图像，然后使用变换

平移

将其移动到位，并

缩放

将其拉伸

可以找到一个很好的解释

下面是一个非常基本的示例：

---

我不确定图像是不是更好的解决方案。。根据拉伸的程度，它们可能会变形。另一方面，字体应保持其清晰度。

您是否考虑过使用

transform

属性来获得所需的尺寸？是否可以转换高度？我真的不知道如何使用transform（我是网络语言的新手）来拉伸坐标系，请参见。

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)")