文章/答案/技术大牛

发布

社区首页 >问答首页 >如果我使用ObservableHQ v6而不是d3 v5，则在d3中找到的可折叠径向整齐树在单击鼠标后不会折叠

问如果我使用ObservableHQ v6而不是d3 v5，则在d3中找到的可折叠径向整齐树在单击鼠标后不会折叠
EN

Stack Overflow用户

提问于 2021-02-09 06:11:57

回答 1查看 178关注 0票数 1

我一直在尝试将这个ObservableHQ code on collapsible tree复制成常规的html-css-js格式。下面是我的实现。

height = 1000;//+svg.attr("height");
    width = 1000;//+svg.attr("width");
    radius = width/2;

    tree = d3.tree()
    .size([2 * Math.PI, radius])
    .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)
    const data = d3.json("https://cdn.jsdelivr.net/gh/d3/d3-hierarchy@master/test/data/flare.json");
    //const data = d3.json("network.json");
    data.then(function(data){
        console.log(data);
  
      var svg = d3.select("svg")
                .attr("width", width)
                .attr("height",height)
                
      var g = svg.append("g")
                // .attr("transform",'translate('+width/2+','+height/2+')')
      
     const linkgroup = g.append("g")
      .attr("fill", "none")
      .attr("stroke", "#555")
      .attr("stroke-opacity", 0.4)
      .attr("stroke-width", 1.5);

  const nodegroup = g.append("g")
      .attr("stroke-linejoin", "round")
      .attr("stroke-width", 3);

  function newdata (animate = true) {
    let root = tree(d3.hierarchy(data));
    let links_data = root.links();
    let links = linkgroup
      .selectAll("path")
      .data(links_data, d => d.source.data.name+"_"+d.target.data.name);
    
    links.exit().remove();
    
    let newlinks = links
      .enter()
      .append("path")
      .attr("d", d3.linkRadial()
        .angle(d => d.x)
        .radius(0.1));

    
    let t = d3.transition()
      .duration(animate ? 400 : 0)
      .ease(d3.easeLinear)
      .on("end", function() {
          const box = g.node().getBBox();
          svg.transition().duration(1000).attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);
      });
    
    let alllinks = linkgroup.selectAll("path")
    alllinks
        .transition(t)
        .attr("d", d3.linkRadial()
            .angle(d => d.x)
            .radius(d => d.y));

    let nodes_data = root.descendants().reverse();
    let nodes = nodegroup
      .selectAll("g")
      .data(nodes_data, function (d) { 
        if (d.parent) {
          return d.parent.data.name+d.data.name;
        }
        return d.data.name});
    
    nodes.exit().remove();

    let newnodes = nodes
      .enter().append("g");
    
    let allnodes = animate ? nodegroup.selectAll("g").transition(t) : nodegroup.selectAll("g");
    allnodes
      .attr("transform", d => `
        rotate(${d.x * 180 / Math.PI - 90})
        translate(${d.y},0)
      `);
    
    newnodes.append("circle")
        .attr("r", 4.5)
        .on ("click", function (d) {
      let altChildren = d.data.altChildren || [];
      let children = d.data.children;
      d.data.children = altChildren;
      d.data.altChildren = children;
      newdata (); 
    });
        
    nodegroup.selectAll("g circle").attr("fill", function (d) {
      let altChildren = d.data.altChildren || [];
      let children = d.data.children;
      return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "#555" : "#999" } );

    newnodes.append("text")
        .attr("dy", "0.31em")
        .text(d => d.data.name)
      .clone(true).lower()
        .attr("stroke", "white");
    
    nodegroup.selectAll("g text")
      .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
      .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
      .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null);

  }

 newdata (false);
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <div>
      <svg>
      </svg>
    </div>
</body>
</html>

它在这里作为Stackoverflow中的一个片段运行得很好，但当我在我的本地主机web服务器中运行它时，当我单击任何节点时，它都会显示一个错误：

Uncaught TypeError: Cannot read property 'altChildren' of undefined
    at SVGCircleElement.<anonymous> ((index):101)
    at SVGCircleElement.<anonymous> (d3.v6.min.js:2)

第101行(当我单击一个节点时发生错误的地方)如下：

let altChildren = d.data.altChildren || [];

我正在尝试理解我的代码中应该更改什么，以便当我单击任何节点时，它都会折叠/展开。

编辑：

我刚刚意识到这是在本地使用d3 v6的产物。在这里工作的代码片段中使用的是d3 v5。所以现在我意识到这是因为d3 v6。

现在我更新的问题是，需要什么才能确保它与d3 v6一起运行？

javascript

d3.js

data-visualization

回答 1

Stack Overflow用户

发布于 2021-02-09 06:57:10

基于d3 v6 migration guide，本地事件作为第一个参数传递给所有事件侦听器。在本例中，我们有一个鼠标单击事件侦听器。

因此，将.on ("click", function (d) {改为.on ("click", function (event,d) {，如下所示：

从…

newnodes.append("circle")
        .attr("r", 4.5)
        .on ("click", function (d) {
      let altChildren = d.data.altChildren || [];
      let children = d.data.children;
      d.data.children = altChildren;
      d.data.altChildren = children;
      newdata (); 
    });

至

newnodes.append("circle")
        .attr("r", 4.5)
        .on ("click", function (event,d) {
      let altChildren = d.data.altChildren || [];
      let children = d.data.children;
      d.data.children = altChildren;
      d.data.altChildren = children;
      newdata (); 
    });

成功了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66110157

复制

相似问题

问如果我使用ObservableHQ v6而不是d3 v5，则在d3中找到的可折叠径向整齐树在单击鼠标后不会折叠
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果我使用ObservableHQ v6而不是d3 v5，则在d3中找到的可折叠径向整齐树在单击鼠标后不会折叠EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果我使用ObservableHQ v6而不是d3 v5，则在d3中找到的可折叠径向整齐树在单击鼠标后不会折叠
EN