Javascript d3v4力图升级清理

我有一些旧的关系类型-d3版本3中的力图

我渴望清理和减少代码库——减少对所有函数的依赖。我必须重构数据集并创建节点。我已经开始尝试移植代码，但现在遇到升级错误-“d3.force不是一个函数”

将此作为参考

• 渴望修复升级
• 重构以使此图表的创建更容易和更简单-使用数据映射

//版本3

//版本4

var力图={
buildDataStream:函数（userData）{
var data=新数组（）；
$.each（用户数据、函数（索引、值）{
var interestArray=新数组（）；
美元。每个（价值、利益、功能（x、v）{
var localInterestObj={
“标签”：对象键（v）[0]，
“名称”：“-”+Object.keys（v）[0].toLowerCase（），
“大小”：v[对象键（v）[0]]，
“组”：“1级”，
“儿童”：[]
};
兴趣数组推送（localInterestObj）；
});
变量childrenArray=[
{
“标签”：“利益”，
“名称”：“-interests”+“-”+索引，
“组”：“2级”，
“儿童”：兴趣
}        
]
var userObj={
“标签”：value.userName，
“名称”：“+”+索引+“-”+值.userName.toLowerCase（），
“组”：“用户”，
“userID”：索引，
“儿童”：儿童阵列
}
数据推送（userObj）；
});
返回数据；
},
addUserPatterns：函数（patternsSvg，userData）{
/*
我明白了。
pattern元素的高度和宽度似乎有点像比例/百分比。因此，宽度为“1”表示它将填充设置为的整个元素。宽度为“.25”表示该元素的25%。然后，在中，您可以将图像的高度和宽度指定为它们填充的圆的高度和宽度的实际像素值，因此在本例中，我的代码更改为：
*/
$.each（用户数据、函数（索引、值）{
var defs=patternsSvg.append（'svg:defs'）；
defs.append（'svg:pattern'）
.attr（'id'，“-”+索引+“-”+值.userName.toLowerCase（））
.attr（'width'，1）
.attr（'height'，1）
.append（'svg:image'）
.attr（“图像渲染”，“优化质量”）
.attr（'preserveAspectRatio'，“xMidYMid-meet”）
.attr（'xlink:href'，value.userImage）
.attr（'x'，0）
.attr（'y'，0）
.attr（'width'，100）
.attr（'height'，100）；
});
},
调用：函数（持有者、用户数据）{
var data=this.buildDataStream（userData）；
变量模式SVG=d3。选择（保持器）
.append（'svg'）
.attr（'类'，'模式'）
.attr（'width'，0）
.attr（'height'，0）；
this.addUserPatterns（patternsSvg，userData）；
返回数据；
}
};
变量节点制造商={
递归节点：函数（值、节点、级别）{
var=这个；
var children=新数组（）；
如果（value.children.length>0）{
对于（变量c=0；c 0）{
级别++；
对于（变量c=0；c 0）{
对于（var c=0；cI我得到一个-d3.force不是一个函数？--这个版本有任何错误-但是仍然需要大量的工作--引用这是最新的工作版本4--但是需要集成模式和数据重构--我添加了图像路径--但是它们没有正确地放置在圆圈中-
  var forceChart = {
    buildDataStream: function(userData){
      var data = new Array();
        
      $.each(userData, function( index, value ) {
      
        var interestArray = new Array();
         $.each(value.interests, function( x, v ) {
          
           var localInterestObj = {
             "label": Object.keys(v)[0],
             "name": "--"+Object.keys(v)[0].toLowerCase(),
             "size": v[Object.keys(v)[0]],
             "group": "level1",
             "children": []
           };
           interestArray.push(localInterestObj);
         
         });
        
        var childrenArray = [
            {
              "label": "Interests",
              "name": "-interests"+"-"+index,
              "group": "level2",
              "children": interestArray
            }        
        ]
        
        var userObj = {
          "label": value.userName,
          "name": "+"+index+"-"+value.userName.toLowerCase(),
          "group": "User",
          "userID": index,
          "children": childrenArray
        }
            
        data.push(userObj);
      });
      
      return data;
    },
    addUserPatterns: function(patternsSvg, userData){

        /*
        I figured this out.

        The height and width on a pattern element seem to function sort of like a scale / percentage. So a width of "1" means it will fill the whole element it is set to. A width of ".25" means 25% of that element. Then, within the <pattern> you would specify the height and width of the image as the actual pixel value of the height and width of the circle they are filling, so in this case my code was changed to:
        */


      $.each(userData, function(index, value) {
        var defs = patternsSvg.append('svg:defs');
          defs.append('svg:pattern')
            .attr('id', "--"+index+"-"+value.userName.toLowerCase())
            .attr('width', 1)
            .attr('height', 1)
            .append('svg:image')
            .attr('image-rendering', "optimizeQuality")
            .attr('preserveAspectRatio', "xMidYMid meet")
            .attr('xlink:href', value.userImage)
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', 100)
            .attr('height', 100);
      });
    },
    invoke: function(holder, userData){
      var data = this.buildDataStream(userData);

      var patternsSvg = d3.select(holder)
                .append('svg')
                .attr('class', 'patterns')
                .attr('width', 0)
                .attr('height', 0);
      
      this.addUserPatterns(patternsSvg, userData);
      
      return data;
    }
  };

  var nodeMaker = {
    recursiveNode: function(value, nodes, level){
      var that = this;
      
      var children = new Array();
      if(value.children.length > 0){
        for(var c=0;c<value.children.length;c++){
          children.push(value.children[c].name);
        }
      }
      
      var orbSizesArray = [100, 20, 3, 1];
      
      var count = orbSizesArray[level];
          
      var localNode = {
            "name": value.name,         
            "group": value.group,
            "label": value.label,
            "level": level,
            "count": count,
            "linkCount": value.children.length,
            "children": children
          };
      nodes.push(localNode);    

      if(value.children.length > 0){
        level++;
        for(var c=0;c<value.children.length;c++){
          that.recursiveNode(value.children[c], nodes, level);
        }
      }
    },
    createNode: function(data){
      var that = this;
      var nodes = new Array();

      $.each(data, function(index, value) { 
        var level = 0;    
        that.recursiveNode(value, nodes, level);
      });

      return that.discoverChildren(nodes);
    },
    findPosition: function(nodes, c){   
      var pos = 0;
      $.each(nodes, function(i, x) {
        if(x.name == c){
          pos = i;
          return false;
        }
      }); 
      
      return pos;
    },
    discoverChildren: function(nodes){
      var that = this;
      
      $.each(nodes, function( index, value ) {
        var childrenPositionArray = new Array();
        $.each(value.children, function(i, c) {
          childrenPositionArray.push(that.findPosition(nodes, c)); //positionOfChild
        });

        nodes[index]["childrenPositions"] = childrenPositionArray;
        nodes[index]["nodePosition"] = index;
      });

      return nodes;
    },
    createLinks: function(nodes){

      var links = new Array();

      $.each(nodes, function(i, val) {
        var source = val.nodePosition;
          
        if(val.childrenPositions.length > 0){
        
          for(var c=0;c<val.childrenPositions.length;c++){
            var target = val.childrenPositions[c];
              
             var localLink = {
                "source": source,
                "target": target,
                "depth": 1,
                "count": 1    
              };
            
            links.push(localLink);
          }
        }     
      });
          
      return links;
    }
  };