javascript - 创建加载 d3.js 的 float 图像

Question

我是 d3.js 的新手，并尝试根据特定条件使用 d3.js 从文件夹中动态加载图像。我使用的代码是

           var svg = d3.select("body")
            .append("svg")
            .attr("width", 150)
            .attr("height", 150)
            .style("border", "1px solid black");


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

    data.forEach(function(d) {

        arrFileUrl.push(d['FingerImageName']);
        arrBrightness.push(d['Brightness']);
        arrPattern.push(d['Pattern']);
        arrSize.push(d['Size']);

    });//data


    var imgs = svg.selectAll("image").data(arrFileUrl[0]);

    imgs.enter()
        .append("svg:image")
        .attr("xlink:href", arrFileUrl[0])
        .attr("x", "20")
        .attr("y", "20")
        .attr("width", "120")
        .attr("height", "120");

我想让这些图像像气泡一样漂浮，这样它们就没有固定的位置。我该怎么做？

Answer 1

你做的数据绑定(bind)是错误的:如果你想为每条数据一个图像，使用:

var imgs = svg.selectAll("image").data(arrFileUrl);

如果您只想要第一张图片，请使用:

var imgs = svg.selectAll("image").data( [arrFileUrl[0]] );

(数据函数总是接受一个数组)。

---

话虽这么说，从长远来看，使用您的 data 对象(而不是 arrFileUrl)可能是一个更明智的选择。您可以按如下方式访问字符串名称:

 .attr("xlink:href", function (d,i) {return d.FingerImageName})

要使图像四处移动，请使用 Force Layout与

var force = d3.layout.force()
    .nodes(data)
    .start()

您可能需要使用重力和其他系数来获得您想要的效果。在任何情况下，这都会为您的 data 数组中的元素提供 x 和 y 坐标，然后可以通过以下方式访问:

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

您需要在每个 “tick” 事件中调用这些行，即每次坐标更新时。