Question

我想将一些代码从d3js版本3切换到版本4。该图使单击时可以更改节点和连接的节点的不透明度和半径。但是，由于在版本4中未以相同的方式定义节点的圆，因此不能以相同的方式更改半径。这是执行的更改：

 var node = svg.selectAll('.node')
        .data(nodes)
        .enter().append('g')
        .attr('class', 'node')
        //.attr('r', 15) 
        //.style('fill', function(d) {
        //   return color(d.degree);
        //})
        .call(d3.drag()
           .on('start', dragstarted)
           .on('drag',  dragged)
        )
        .on('click', connectedNodes);

  node.append('circle')
     .attr('r', 15) 
     .style('fill', function(d) {
        return color(d.degree);
     });

这是用于单击时更改节点及其邻居的功能：

function connectedNodes() {
        if (toggle == 0) {
           var d = d3.select(this).node().__data__;
           node.style("opacity", function(o) {
              return neighboring(d, o) | neighboring(o, d) ? 1 : 0.3;
           });
           node.attr('r', function(o) {
              return neighboring(d, o) | neighboring(o, d) ? 20 : 15;
           });
           link.style("opacity", function(o) {
              return d.index == o.source.index | d.index == o.target.index ? 1 : 0.8;
           });
           link.style('stroke-width', function(o) {
              return d.index == o.source.index | d.index == o.target.index ? 3 : 0.8;
           });
           toggle = 1;
      }
 }

块node.attr('r', function(o)不再起作用（与node.style('opacity, function(o)相反），因为圆的定义方式不同。

如何在单击时仍然更新节点和连接的节点的半径？我已经看到了一些有关如何执行此操作的示例，但都没有应用，因为我不仅希望单击的节点更大，而且还希望连接的节点更大，而且我不知道如何从节点属性中检索圆形属性。

here是完整的html（嵌入式javascript），而here是脚本使用的graph.json。两者都位于同一文件夹中，并且python -m SimpleHTTPServer 8080都可以提供这些文件。

非常感谢！

我试图硬编码一个更高的值，而不管邻居是什么，仍然没有变化，不考虑该值。

node.attr('r', function(o) {
   //   return neighboring(d, o) || neighboring(o, d) ? 20 : 15;
   return 25;
});

Answer 1

我想知道您是否曾经能够运行所显示的粘贴容器。

{}和()存在太多问题，导致我的浏览器拒绝运行它。

您在g节点下没有任何内容，因此可以将其替换为圆圈。 title是circle的子代，text不是。
div中的weight:800px是什么？
更新圈子的cx和cy，transform也可以，但是更整洁。

重置node的所有r toggle==1属性

  var width = 800, height = 600;
  var color = d3.scaleOrdinal(d3.schemeCategory10);

  var simulation = d3.forceSimulation()
     .force('link', d3.forceLink().id(function (d) { return d.id;}).distance(100).strength(1))
     .force('charge', d3.forceManyBody())
     .force('center', d3.forceCenter(width/2, height/2));

  var svg = d3.select('#canvas').select('svg');
  if (svg.empty()) {
     svg = d3.select('#canvas').append('svg')
        .attr('width', width)
        .attr('height', height);
  }

  d3.json('graph.json', function(error, graph) {
     if (error) throw error;
     var links = graph.links, nodes = graph.nodes;
     var link = svg.selectAll('.link')
        .data(graph.links)
        .enter().append('line')
        .attr('class', 'link');

     var node = svg.selectAll('.node')
        .data(nodes)
        .enter().append('circle')
        .attr('class', 'node')
        .attr('r', 15)
        .style('fill', function(d) { return color(d.degree); })
        .call(d3.drag()
           .on('start', dragstarted)
           .on('drag',  dragged)
           .on('end',  dragended)
        )
        .on('click', connectedNodes);

  simulation
     .nodes(nodes)
     .on('tick', ticked);

  simulation.force('link').links(links);

   function ticked() {
    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;})
    }

     function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
     }

     function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
     }

     function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
     }

     node.append('title')
        .text(function(d) {
           return "Node: " + d.id + "\n" + "Degree: " + d.degree + "\n" + "Katz: " + d.katz;
        });

     var toggle = 0;
     var linkedByIndex = {};
     for (var i = 0; i < graph.nodes.length; i++) {
        linkedByIndex[i + "," + i] = 1;
     }
     graph.links.forEach(function(d) {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
     });

     function neighboring(a, b) {
        return linkedByIndex[a.index + "," + b.index];
     }

     function connectedNodes() {
        if (toggle == 0) {
           var d = d3.select(this).node().__data__;
           node.style("opacity", function(o) {
              return neighboring(d, o) || neighboring(o, d) ? 1 : 0.3;
           })
               .attr('r', function(o) {
              return neighboring(d, o) || neighboring(o, d) ? 20 : 15;
           });
           link.style("opacity", function(o) {
              return d.index == o.source.index || d.index == o.target.index ? 1 : 0.8;
           })
               .style('stroke-width', function(o) {
              return d.index == o.source.index || d.index == o.target.index ? 3 : 0.8;
           });
           toggle = 1;
        } else {
           node.style('opacity', 1)
               .attr('r', 15);
           link.style('opacity', 1)
               .style('stroke-width', 1);
           toggle = 0;
        }
     }
  }
);

d3js切换到版本4：不再可以单击更改节点和节点邻居的半径

1 个答案: