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）我想根据属性缩放节点大小。根据我的理解，这可以通过提供“scale”属性

来完成

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，宽度，高度）？

2）当图表缩放时，Chrome会模糊图像，而在Firefox中，图像会保持清晰（图片）。如何避免这种模糊？

Chrome above, FF below

修改：根据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中创建的，画布大小裁剪为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">。

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

1 个答案: