Question

我需要将节点固定在第一个dblclick中，并更改节点的颜色和笔触。在第二个dblclick上，我想将其反向。对于dblclick函数，使用下面的代码，对于第一个dblclick，该节点的颜色变为深绿色，但该节点没有被固定。第二个dblclick也不执行任何操作。有人可以帮忙吗。

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
   // .linkStrength(1)
   // .friction(0)
   // .gravity(0)
    .charge(-250)
    .on("tick", tick)
    .start();

// Set the range
var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");


// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .style("stroke", function(d){ 
        if(d.value < 1) {return 'blue'} else {return 'red'} 
    }) ;

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .on("dblclick", dblclick)
    .call(force.drag);


//radius depends on weight of node
node.append("circle")
  .attr("r", function(d) {
    var minRadius = 5;
    return minRadius + (d.weight * 2);
    })
   .on("dblclick", dblclick);


node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

node.append("title")
    .text(function(d) { return d.id; });

// add the curvy lines
function tick() {
    path.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" +
            d.source.x + "," +
            d.source.y + "A" +
            dr + "," + dr + " 0 0,1 " +
            d.target.x + "," +
            d.target.y;
    });

    node
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")"; });
};

function dblclick1(d) {
  d3.select(this)
  .attr("stroke", "#000000")
  .attr("stroke-width", 1)
  .style("fill", "teal")
  .classed("fixed", d.fixed = true)};

function dblclick(d) {  
        console.log("dblclick")
        if (d.fixed == true) { //pinned state
          console.log("pinned")
          d3.select(this)
          .attr("stroke", "#000000")
          .attr("stroke-width", 0)
          .style("fill", "white")
          .classed("fixed", d.fixed = false);//now unpin
        } 
        else 
        { //else not pinned state
          console.log("not pinned")
          d3.select(this)
          .attr("stroke", "#000000")
          .attr("stroke-width", 1)
          .style("fill", "teal")
          .classed("fixed", d.fixed = true);//now pin
        }
}//end dbl click

Answer 1

实际上，我能够弄清楚这一点。在节点创建过程和圆附加过程中，我两次调用函数.on（“ dblclick”，dblclick）。这导致该节点被固定，然后再次取消固定。删除其中一个函数调用可解决此问题。

dbclick不止一次功能不起作用，力导向图d3.js

1 个答案: