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

您正在进行错误的数据绑定：如果您想为每个数据提供一个图像，请使用：

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

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

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

您需要在每次"tick"事件中调用这些行，即每次更新坐标时都会调用这些行。

创建浮动图像加载d3.js

1 个答案: