在Multiforce布局中对d3.js中的节点进行分组 [英] Grouping nodes in d3.js in multiforce layout

问题描述

我正在尝试在以下代码中对作为浮动图像生成的节点进行分组.为了进行分组，我使用了数组arrInt []，该数组具有许多(0,1,2)值.基于arrInt值，所有0、1和2应该在一起.我无法在刻度功能上做到这一点

Hi I am trying to group nodes generated as floating images in below code. For grouping I am using array arrInt[] which has many values of(0,1,2). Based on arrInt values, all 0's, 1's and 2's should be together. I am unable to do it on tick function

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']);
        arrBrightness.push(d['Brightness']);
        arrPattern.push(d['Pattern']);
        arrSize.push(d['Size']);

    });


    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 && pattSelect.contains(d['Pattern'])){
                arrMatchFile.push(d['FingerImageName']);
            }

        }); 
    }


    for(j=0;j<arrPattern.length;j++){
        if(arrPattern[j] === "Arches"){
            arrInt[j] = 0;
        }
        if(arrPattern[j] === "Whorls"){
            arrInt[j] = 1;
        }
        if(arrPattern[j] === "Loops"){
            arrInt[j] = 2;  
        }
    }


    var nodes = d3.range(arrFileUrl.length).map(function(i) {
      return {index: arrInt[i]};
    });

    console.log(nodes);

    var force = d3.layout.force()
    .nodes(nodes)
    .gravity(0.02)
    //.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) {
                return arrFileUrl[i];
    })
    .attr("class", "node")
    .attr("width", 120)
    .attr("height", 160)
    .style("stroke", "black")
    .call(force.drag)
    .style("opacity", function(d,i){
        if(arrMatchFile.contains(arrFileUrl[i])) {
            return 5;
        } else {
            return 0.2;
        }           
    })
    .on("mousedown", function() { d3.event.stopPropagation(); });



    svg.transition()
    .duration(1000);

    d3.select("body")
    .on("mousedown", mousedown);


    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; }); 
    }


    function mousedown() {
      nodes.forEach(function(o, i) {
        o.x += (Math.random() - .5) * 40;
        o.y += (Math.random() - .5) * 40;
      });
      force.resume();
    }


});

推荐答案

在

 nodes.forEach(function(o, i) {
    o.y += i & 1 ? k : -k;
    o.x += i & 2 ? k : -k;

  });

您正在使用索引i进行聚类...这将不起作用，您想使用arrInt[i]代替:

You are using the index i for clustering... this won't work, you want to use arrInt[i] instead:

 nodes.forEach(function(o, i) {
    o.y += arrInt[i] & 1 ? k : -k;
    o.x += arrInt[i] & 2 ? k : -k;
  });

这篇关于在Multiforce布局中对d3.js中的节点进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！