0

跟进这个问题：在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 回答