代表节点的 Svg 图像，在力有向图中改变节点大小

Question

到目前为止，我已经在力导向图中使用了 d3.svg.symbol() 来区分不同的节点类型。

我现在想通过将节点显示为 svg 图像来区分不同的节点类型。关注其中之一 examples我使用以下代码来显示节点图像:

    var node = svg.selectAll("image.node").data(json.nodes);
    var nodeEnter = node.enter().append("svg:g").append("svg:image")
    .attr("class", "node")
    .attr("xlink:href", function(d)
    {
      switch( d.source )
      {
        case "GEXP": return "img/node_gexp.svg";
        case "CNVR": return "img/node_cnvr.svg";
        case "METH": return "img/node_meth.svg";
        case "CLIN": return "img/node_clin.svg";
        case "GNAB": return "img/node_gnab.svg";
        case "MIRN": return "img/node_mirn.svg";
        case "SAMP": return "img/node_samp.svg";
        case "RPPA": return "img/node_rppa.svg";
      }
    })
    .attr("x", function(d) { return d.px; } )
    .attr("y", function(d) { return d.py; } )
    .attr("width", "50")
    .attr("height", "50")
    .attr("transform", "translate(-25,-25)")
    .on("click", function(d) { 
      console.log("nodeclick");
      } )
    .on("mouseover", fade(0.10) )
    .on("mouseout", fade(default_opacity) )
    .call(force.drag);

这确实显示了 svg 图像，但我有两个问题:

1)我想根据属性缩放节点大小。据我了解，这可以通过提供“比例”属性来完成

transform="scale(something)"

到合适的位置，例如图像标签本身或包含图像的组:

    var node = svg.selectAll("image.node").data(json.nodes);
    var nodeEnter = node.enter()
    .append("svg:g")
    .attr("transform", function(d) 
    {
      var str = "scale(";
        if( d.gene_interesting_score && d.gene_interesting_score > 0 )
        {
          return str + ( (d.gene_interesting_score - minScore ) / ( maxScore - minScore ) ) + ")";
        }
        return str + 0.7 + ")";
    })
    .append("svg:image")
    ....

碰巧的是， scale() 变换会替换图像:它们不再位于边缘的端点上。初始化图形时如何正确调整图像大小，最好使控制机制在单个函数内(例如，这样我就不必分别控制 x、y、width、height)？

2) 当图形被放大时，Chrome 会使图像模糊，而在 Firefox 中图像保持清晰(图片)。如何避免这种模糊？



编辑:根据 duopixel 的建议，代码现在是:

    var nodeGroup = svg.selectAll("image.node").data(json.nodes).enter()
    .append("svg:g")
    .attr("id", function(d) { return d.id; }) 
    .attr("class", "nodeGroup")
    .call(force.drag);

    var node = nodeGroup.append("svg:image")
    .attr("viewBox", "0 0 " + nodeImageW + " " + nodeImageH)
    .attr("class", "node")
    .attr("xlink:href", function(d)
    {
      switch( d.source )
      {
        case "GEXP": return "img/node_gexp.svg";
        case "CNVR": return "img/node_cnvr.svg";
        case "METH": return "img/node_meth.svg";
        case "CLIN": return "img/node_clin.svg";
        case "GNAB": return "img/node_gnab.svg";
        case "MIRN": return "img/node_mirn.svg";
        case "SAMP": return "img/node_samp.svg";
        case "RPPA": return "img/node_rppa.svg";
      }
    })
    .attr("width", nodeImageW)
    .attr("height", nodeImageH)
    .attr("transform", function(d) 
    {
      var matrix = "matrix(";
      var scale = 0.7; // sx & sy
      if( d.gene_interesting_score && d.gene_interesting_score > 0 )
      {
        scale = ( (d.gene_interesting_score - minScore ) / ( maxScore - minScore ) ) * 0.5 + 0.25; 
      }
      //console.log("id=" + d.id + ", score=" + scale );
      matrix += scale + ",0,0," + scale + "," + ( d.x - ( scale*nodeImageW/2 ) ) + "," + ( d.y - ( scale*nodeImageH/2 ) ) + ")";
      return matrix;
    })
    // .attr("transform", "translate(-25,-25)")
    .on("click", function(d) { 
      console.log("nodeclick");
      } )
    .on("mouseover", fade(0.10) )
    .on("mouseout", fade(node_def_opacity) );

它解决了问题 #1，但不是第二个问题:通过选择

var nodeImageH = 300;
var nodeImageW = 300;

生成的 svg 图像包含很多空白空间(通过使用 firebug 的选择工具选择图像可以看到)。图像是在 Inkscape 中创建的， Canvas 大小裁剪为 50x50，这应该是正确的查看像素大小。

Answer 1

#1您需要设置变换原点。在 SVG 中，这意味着您将不得不使用这里回答的变换矩阵:https://stackoverflow.com/a/6714140/524555
#2要解决模糊缩放修改 viewBox, width, height您的 svg文件作为大图像开始(即 <svg viewBox="0 0 300 300" width="300" height="300"> .