使用d3.js

Question

我正在尝试过滤arrMatchFile中存在的图像。因此，那些url不存在于arrMatchFile中的图像将使用样式淡出（“不透明度”，0.5），而那些其url存在的图像应该被视为原样。但是这里的url在arrMatchFile中的图像没有显示出来。我怀疑我可能会覆盖它，因为当我在firebug控制台中看到它时，href标签丢失了。以下是此方案的代码。

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

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']);

    });

    //console.log(data);

    var boolBrig = arrBrightness.contains(brightness);
    var boolSize = arrSize.contains(pixel);

    if(boolBrig === true && boolSize === true){

        data.forEach(function(d){
            if(d['Brightness'] === brightness && d['Size'] === pixel && d['Pattern'] === pattSelect){
                arrMatchFile.push(d['FingerImageName']);
            }

        }); 
    }


    var nodes = d3.range(arrFileUrl.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("image")
    .attr("xlink:href", function (d,i) {
            if(arrMatchFile.contains(arrFileUrl[i])) {
                return arrFileUrl[i];
            }
    })
    .attr("class", "node")
    .attr("width", 120)
    .attr("height", 160)
    .style("stroke", "black")
    .call(force.drag)
    .style("opacity", 0.5);


    node.attr("xlink:href", function (d,i) {
            if(arrMatchFile.contains(arrFileUrl[i]) === false) {
                return arrFileUrl[i];
            }
    })
    .style("stroke", "black")
    .call(force.drag)
    .style("opacity", 2);


    svg.transition()
    .duration(1000);


    function tick(e) {

      // Push different nodes in different directions for clustering.
      var k = 4 * 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

您需要仔细考虑arrMatchFile与其他图像之间的区别。 ＆＃34; xlink：href＆＃34;不应该是不同的（在这两种情况下你仍然需要图像，所以你应该使用：

node 
 ...
 .attr("xlink:href", function (d,i) {
            return arrFileUrl[i];
 })
 ...

但是，不透明度是不同的，因此您的测试会出现在＆＃34;不透明度＆＃34;属性：

...
.style("opacity", function(d,i){
        if(arrMatchFile.contains(arrFileUrl[i])) {
            return 0.5;
        } else {
            return 1;
        }           
});

一些额外的建议：

• .attr（）和.style（）中使用的每个函数都应返回一些内容，无论它们的参数如何。所以：始终考虑任何else的{​​{1}}案例并确保if与此案件相关的事情

• 你似乎很自然地希望有一组数组来描述你的数据（每个可能的信息都有一个数组）。当你使用d3时，这是最不舒服的方式。只需拥有一个对象数组就可以缩短代码，每个对象都包含您可以提供的所有信息。例如，不要为匹配文件使用单独的数组，请执行以下操作

  return

  然后您可以按如下方式测试此字段：

    data.forEach(function(d){
       if(d['Brightness'] === brightness && d['Size'] === pixel &&   d['Pattern'] === pattSelect){
          d.matchFile = true;
       } else {
          d.matchFile = false;
       }
     }); 
  

  原则上，您不应该需要所有 .style("opacity", function(d,i){ if (d.matchFile) { return 0.5; } else { return 1; } }); 个变量。

• 您的布尔值arr...和boolBrig在您当前的代码中是多余的，您只需删除与其相关的所有内容。