Question

这是一个非常好的例子（感谢您的时间）。

我试图使用图像而不是字母（如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() ) ; } );

任何见解？

Answer 1

您需要使用字母png的原始高度添加图像，然后使用转换translate将其移动到位，并使用scale来拉伸它。

可以找到一个很好的解释here。

这是一个非常基本的例子：

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

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

跟进：使用图像绘制序列-logos-in-d3

1 个答案: