Question

使用和玩弄悲惨世界的Json数据，我根据d3中的修改编码。除了突出显示/标记节点（如果它处于“固定”状态（相对于力图布局））之外，我能够对所有内容进行编码。当您双击一个节点时，它将冻结，拖动和移动会将其固定在某个位置，而所有其他节点（默认情况下）都在力布局中。再次双击该节点时，该节点将取消固定，并像往常一样浮动在力布局中。我想要做的第二件事是，如果节点处于“固定”状态，节点应该是不同的颜色，或以某种方式突出显示。我在方法链中尝试了几种方法，使用条件语句检查节点状态以修改节点功能，但它们不起作用。我还将dblclick处理程序分离为外部函数（这是我当前的版本。

我将我的代码放在方法链中的原始尝试中： http://pastebin.com/SqrqgVET

我还尝试了另一种方法，使用变量“固定”来确定节点的状态，在双击中，修改节点边界，并相应地更改状态，但这也不会改变节点的外观。有一个console.log（）语句，该函数会相应地进入if else部分。

http://pastebin.com/dzEw42mQ

以下是当前版本。

任何反馈都会很棒。谢谢！

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
  cursor: move;
  stroke: #fff;
  stroke-width: 1.5px;
}
.node.fixed {
    fill: #f00;
}

   .link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>

<head>
<title>Victor Hugo Had No Internet</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/colorbrewer.v1.min.js"></script>
</head>

<body>
<script type="text/javascript">

//Size of region to render on
var width = 960,
    height = 500;

var color = d3.scale.ordinal()
    .domain([1, 10])
    .range(colorbrewer.BrBG[9]);

//D3 force directed layout
//Try playing with the charge and link distance
var force = d3.layout.force()
    .charge(-100)
    .linkDistance(40)
    //.on("tick", tick) //event ADDED
    .size([width, height]);

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



//Select the miserables data ;)
d3.json("miserables.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

//Add the links
  var link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

//Add the nodes
  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d){ return Math.sqrt(d.coolness);})
      .attr("stroke", "#ffffff")
      .on("dblclick", dblclick)
      .call(force.drag)
        .style("fill", function(d) {return color(d.group);}); //});
        //.style("border", 5);//function(d) {
             //if (d.fixed==false) {return 4}; });





// node.append("text") //label
 //       .attr("dx", 6)
 //       .attr("dy", ".10em")
 //       .text(function(d) { return d.name; });

 //add labels
  var labels = svg.selectAll("text")
        .data(graph.nodes)
        .enter()
        .append("text")
        .attr({"x":function(d){return d.x;},
              "y":function(d){return d.y;}})
        .text(function(d) {
              if (d.coolness>25 && d.name.length > 6) {return d.name.substring(0,6)+'...'}
              if (d.coolness>25 && d.name.length < 6) {return d.name}
              else    { return null } ;})
        .call(force.drag);

//Update stuff for animation:
//   This takes the physics simulation for the force directed graph and
//   sets the location of the nodes and edges to the new positions
  force.on("tick", function() {
    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; });

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

  });

    // action to take on mouse double click

function dblclick(d) {  //color, stroke not working.
        //var pinned  = d3.select(this).attr("stroke");
        console.log("dblclick")
        if (d.fixed == true) { //pinned state
        console.log("pinned")
        d3.select(this)
        .attr("stroke", "#ffffff")
        .attr("stroke-width", 1.5)
        .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", 4)
        .classed("fixed", d.fixed = true);
        }


        }//end dbl click

});

</script>`

这是控制台日志的输出（我在其中添加了console.log（this）以检查正在传递给dblclick函数的元素以及是否相应地设置了参数：

[Log] dblclick (miserables_graph.html, line 131)
[Log] <circle class="node fixed" r="9.1104335791443" stroke="#000000" style="fill: #f6e8c3;" cx="630.38114584665" cy="98.39845698676822" stroke-width="4"></circle> (miserables_graph.html, line 132)

[Log] not pinned (miserables_graph.html, line 140)
[Log] dblclick (miserables_graph.html, line 131)
[Log] <circle class="node" r="9.1104335791443" stroke="#ffffff" style="fill: #f6e8c3;" cx="630.38114584665" cy="98.39845698676822" stroke-width="1.5"></circle> (miserables_graph.html, line 132)

[Log] pinned (miserables_graph.html, line 134)

d3强制布局节点固定在dblick上，但外观不会修改

0 个答案: