Question

我正在尝试使用D3力图创建交互式内容页面。我希望链接距离可以通过固定值或函数来限制，但我已经尝试了两者并且似乎没有任何效果。

任何帮助将不胜感激，我是新手，我正在尝试很多不同的事情，所以我为我的凌乱代码和任何错误道歉。

提前致谢

var w = 1000,
    h = 800;



var palette = {
      "lightgray": "#819090",
      "gray": "#708284",
      "mediumgray": "#536870",
      "darkgray": "#475B62",
      "darkblue": "#0A2933",
      "darkerblue": "#042029",
      "paleryellow": "#FCF4DC",
      "white" :"#FFF"
  }

d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};


var nodes = [

    //Project Names

    {name: "POSSESSIVE"}, //0
    {name: "SIMULACRUM"}, //1
    {name: "VOTEBOX"},//2
    {name: "GREAT EXPECTATIONS"},//3
    {name: "SCIENCE BOOK"},//4

    //Connectors

    {name: "Identity", target: [0,1]},
    {name: "Production", target: [0, 1]},
    {name: "Signification", target: [0, 1]},
    {name: "Democracy", target: [1, 2]},
    {name: "Citizenship", target: [1, 2]},
    {name: "Media", target: [4, 3]},
    {name: "Fatality", target: [0, 3]},
    {name: "Consumption", target: [0, 3]},


    //Possessive


    {name: "Language", target: [0]},
    {name: "Permanence", target: [0]},
    {name: "Simulation", target: [0]},

    //Simulacrum

    {name: "Urban", target: [1]},
    {name: "Nature", target: [1]},
    {name: "Artificial", target: [1]},
    {name: "Landscape", target: [1]},

    //Life of a digital vote

    {name: "Live Event", target: [2]},
    {name: "Platform", target: [2]},
    {name: "Acessibility", target: [2]},
    {name: "Visualization", target: [2]},
    {name: "Information", target: [2]},
    {name: "Transparency", target: [2]},

     //Great Expectations

    {name: "Curation", target: [3]},
    {name: "Obsolescence", target: [3]},
    {name: "Death", target: [3]},

    //Science Book

    {name: "Structure", target: [4]},
    {name: "Object", target: [4]},
    {name: "Book", target: [4]},
    {name: "Editorial", target: [4]},
    {name: "Quantum Physics", target: [4]},
    {name: "Space", target: [4]}



];

var links = [];

for (var i = 0; i < nodes.length; i++){

    if(nodes[i].target !== undefined){

        for(var x = 0; x < nodes[i].target.length; x++){

            links.push({

                source:nodes[i],
                target:nodes[nodes[i].target[x]]
            })
        }
    }


}

var myChart = d3.select("#canvas-holder")
    .append("svg")
    .attr("width", w)
    .attr("height", h)

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


    .links([])

    // .linkDistance(function (d,i) { if (i>12){return "30"}})
    .linkStrength(function (d,i) { if (i>12){return "1"} else {return "0"}})
    .gravity(0.1)
    .charge(-500)
    .size([w,h])


var link = myChart.selectAll('line')
     .data(links).enter().append('line')
     .attr("stroke", palette.gray)


var node = myChart.selectAll("circle")
    .data(nodes).enter()
    .append("g")
    .call(force.drag);

node.append("circle")
    .attr("cx", function (d){return d.x;})
    .attr("cy", function (d){return d.y})
    .attr("r", function (d,i){if (i>0, i<5){return "60";} else{return "40"}})
    .attr("fill", palette.white)

node.append("text")

    // .text(function(d) {return d.name})
    .each(function (d) {
    var arr = d.name.split(" ");
    if (arr != undefined) {
        for (i = 0; i < arr.length; i++) {
            d3.select(this).append("tspan")
                .text(arr[i])
                .attr("dy", i ? "1.2em" : 0)
                .attr("x", 0)
                .attr("text-anchor", "middle")
                .attr("class", "tspan" + i);
            }
        }
    });

    var text= myChart.selectAll("text")
    .attr("font-family", function(d,i) {if (i>0, i<5) {return "NexaHeavy";} else {return "Nexa"}})
    .attr("font-size", function(d,i) {if (i>4, i<13) {return "13px";} else {return "12px"}})
    .attr("fill", function(d,i) {if (i>0, i<5) {return "#CF2900";} else {return "#000"}})
    .attr("font-variant", function(d,i) {if (i>4, i<13) {return "small-caps";} else {return "normal"}})


node.on("mouseover",function(){
  var sel = d3.select(this);
  sel.moveToFront();
});

function flatten(d) {
  var nodes = [], i = 0;

  function recurse(nodes) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }

  recurse(d);
  return nodes;
}

force.on("tick", function(e){

    node.attr("transform", function(d,i){

        return "translate("+d.x+","+d.y+")";
    })

    link
        .attr("x1",function(d) {return d.source.x})
        .attr("y1",function(d) {return d.source.y})
        .attr("x2",function(d) {return d.target.x})
        .attr("y2",function(d) {return d.target.y})

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

force.start();

Answer 1

如果你知道节点的大小，那么会对charge，gravity和linkStrengh进行影响的参数将会大大影响你的力导向图的行为和链接。这就是我为我所做的工作。尤其是linkStrengh指定的链接的刚性。

在D3中设置linkDistance无效

1 个答案: