Question

我试图在矩形上附加图像，图像位置存在于名为arrFileUrl的数组中。这种颜色的节点是白色的，我想在每个生成的矩形上附加这些图像。我怎么能这样做？

var arrFileUrl = [], arrBrightness = [], arrPattern = [], arrSize = [];

var width = 1260,
height = 1200;

var fill = d3.scale.category10();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.csv("data/Images.csv", function(error, data) {

    data.forEach(function(d) {

        arrFileUrl.push(d['FingerImageName']);

    });

    var nodes = d3.range(arrSize.length).map(function(i) {
      return {index: i};
    });

    var force = d3.layout.force()
    .nodes(nodes)
    .gravity(0.05)
    .charge(-1700)
    .friction(0.5)
    .size([width, height])
    .on("tick", tick)
    .start();


    var node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("rect")
        .attr("class", "node")
        .attr("width", 120)
        .attr("height", 160)
        .style("fill", "#fff")
        .style("stroke", "black")
        .call(force.drag);


    node.append("image")
  .attr("xlink:href", "https://github.com/favicon.ico")
  .attr("x", 16)
  .attr("y", 16)
  .attr("width", 100)
  .attr("height", 120);

    svg.style("opacity", 1e-6)
      .transition()
        .duration(1000)
        .style("opacity", 1);


    function tick(e) {

      // Push different nodes in different directions for clustering.
      var k = 6 * e.alpha;
      nodes.forEach(function(o, i) {
        o.y += i & 1 ? k : -k;
        o.x += i & 2 ? k : -k;
      });

      node.attr("x", function(d) { return d.x; })
          .attr("y", function(d) { return d.y; });
    }

});

Answer 1

这样做：

function tick(e) {

      // Push different nodes in different directions for clustering.
      var k = 6 * e.alpha;
      nodes.forEach(function(o, i) {
        o.y += i & 1 ? k : -k;
        o.x += i & 2 ? k : -k;
      });
      //do transform
      node.attr("transform", function(d) { 
       return "translate(" + d.x + "," + d.y + ")"; 
      })

}

勾选功能翻译整个组

image

代码中的问题：

您在rectangle DOM中附加了tick function，这是图片不可见的原因。
在extracted = Props.map(function(obj) { for(var p in obj) return obj[p]; });中，您正在单独移动x和y，而不是移动图像，方法应该是将它们移动到一个组中并按照上面的步骤翻译组。

无法在d3.js中的节点上附加图像

1 个答案: