Javascript 当我想画和弦时，D3V4中出现了一些问题_Javascript_Google Chrome_D3.js

Javascript 当我想画和弦时，D3V4中出现了一些问题

javascript google-chrome d3.js

Javascript 当我想画和弦时，D3V4中出现了一些问题,javascript,google-chrome,d3.js,Javascript,Google Chrome,D3.js,我在D3V4中画和弦时遇到了一些问题。问题是“未捕获类型错误：g_outer.selectAll（…）.data（…）.enter不是函数”在代码的第53位。但是当我看到源代码引用和时。我已经修改了一些错误，但仍然无法工作。这是我的密码： <html> <head> <meta charset="UTF-8"> <title>Chord char</title> </head>

我在D3V4中画和弦时遇到了一些问题。问题是“未捕获类型错误：g_outer.selectAll（…）.data（…）.enter不是函数”在代码的第53位。但是当我看到源代码引用和时。我已经修改了一些错误，但仍然无法工作。这是我的密码：

 <html>
    <head>
    <meta charset="UTF-8">
    <title>Chord char</title>
    </head>
     
    <body>
        <script src="http://d3js.org/d3.v4.min.js"></script>
        <script> 
            var city_name = [ "English" , "America" ,  "German" ,  "Japan" ,  "Austrilia" ];
            var population = [ 
                          [ 1000, 3045, 4567, 1234, 3714 ],
                          [ 3214, 2000, 2060, 124 , 3234 ],
                          [ 8761, 6545, 3000, 8045, 647  ],
                          [ 3211, 1067, 3214, 4000, 1006 ],
                          [ 2146, 1034, 6745, 4764, 5000 ],
                          ];


            var chord_layout = d3.chord(population) 
                .padAngle(0.03)  
                .sortSubgroups(d3.descending); 


            var groups = chord_layout.sortGroups();
            var chords = chord_layout.sortChords();

            var width = 600;     
            var height = 600;    
            var innerRadius = width/2 * 0.7; 
            var outerRadius = innerRadius * 1.1;

            var color20 = d3.scaleOrdinal(d3.schemeCategory20);

            //add element
            var svg = d3.select("body")    
                        .append("svg")     
                        .attr("width",width)      
                        .attr("height",height)      
                        .append("g")    
                        .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

            //draw nodes
            var outer_arc = d3.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

            var g_outer = svg.append("g");

            //add color
            g_outer.selectAll("path")
                .data(groups)
                .enter().append("path")
                .style("fill", function(d) { return color20(d.index); })
                .style("stroke", function(d) { return color20(d.index); })
                .attr("d", outer_arc );

            //add text
            g_outer.selectAll("text")
                .data(groups)
                .enter()
                .append("text")
                .each( function(d,i) {
                    d.angle = (d.startAngle + d.endAngle) / 2;  //calculate the average of the start angle and the end angle
                    d.name = city_name[i];     //assignment for the city
                })
                .attr("dy", ".35em")  //width
                .attr("transform", function(d){      //angle
                    return "rotate(" + (d.angle * 180 / Math.PI ) + ")" +
                    "translate(0,"+ -1.0*(outerRadius+10) +")" +
                    ( ( d.angle > Math.PI*3/4 && d.angle < Math.PI*5/4 ) ? "rotate(180)" : "");
                }) //to spin when the angle between 135 to 225 degrees
                .text(function(d){
                    return d.name;
                })

                //add chord
                var inner_chord = d3.ribbon()
                    .radius(innerRadius);

                svg.append("g")
                    .attr("class", "chord")
                    .selectAll("path")   //use the path as element
                    .attr("d", inner_chord)  //
                    .style("fill", function(d) { return color20(d.source.index); })
                    .style("opacity" ,1)
                    .on("mouseover", function(d,i){
                        d3.select(this)
                            .style("fill","yellow");
                    })
                    .on("mouseout", function(d,i){
                        d3.select(this)
                            .transition()
                            .duration(1000)
                            .style("fill",color20(d.source.index));
                    });
        </script>     
    </body>
    </html>


和弦字符
 
     
var city_name=[“英语”、“美国”、“德语”、“日本”、“澳大利亚”]；
变量总体=[
[ 1000, 3045, 4567, 1234, 3714 ],
[ 3214, 2000, 2060, 124 , 3234 ],
[ 8761, 6545, 3000, 8045, 647  ],
[ 3211, 1067, 3214, 4000, 1006 ],
[ 2146, 1034, 6745, 4764, 5000 ],
];
变量chord_布局=d3.chord（总体）
.焊盘角度（0.03）
.Sortsub组（d3下降）；
var groups=chord_layout.sortGroups（）；
var chords=chord_layout.sortChords（）；
var宽度=600；
var高度=600；
var innerRadius=宽度/2*0.7；
var outerRadius=内半径*1.1；
var color20=d3.scaleOrdinal（d3.schemeCategory20）；
//添加元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//绘制节点
var外部电弧=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
var g_outer=svg.append（“g”）；
//添加颜色
g_outer.选择全部（“路径”）
.数据（组）
.enter（）.append（“路径”）
.style（“fill”，函数（d）{return color20（d.index）；}）
.style（“笔划”，函数（d）{return color20（d.index）；}）
.attr（“d”，外弧）；
//添加文本
g_outer.选择全部（“文本”）
.数据（组）
.输入（）
.append（“文本”）
.每个（功能（d，i）{
d、 角度=（d.startAngle+d.endAngle）/2；//计算开始角度和结束角度的平均值
d、 name=city_name[i]；//城市分配
})
.attr（“dy”，“.35em”）//宽度
.attr（“变换”，函数（d）{//angle
返回“旋转（“+（d.angle*180/Math.PI）+”）+
“转换（0，”+-1.0*（外表面+10）+”）”+
（（d.angle>Math.PI*3/4和d.angle


我想画一个这样的和弦：

但在谷歌浏览器中，和弦无法出现。我是d3新手，你能帮我吗？如果你能给我一个好主意，我将不胜感激！谢谢
 您的代码中有大量错误。最大的问题是您不了解d3.chord函数的工作原理。d3
中的一般流程是在提供任何数据之前设置布局功能。在您这样的情况下：
var chord_layout = d3.chord()
  .padAngle(0.03)
  .sortSubgroups(d3.descending);

var groups = chord_layout(population);

修复后，我将其与您的代码混合生成：


和弦字符
var city_name=[“英语”、“美国”、“德语”、“日本”、“澳大利亚”]；
变量总体=[
[1000, 3045, 4567, 1234, 3714],
[3214, 2000, 2060, 124, 3234],
[8761, 6545, 3000, 8045, 647],
[3211, 1067, 3214, 4000, 1006],
[2146, 1034, 6745, 4764, 5000],
];
var chord_layout=d3.chord（）
.焊盘角度（0.03）
.Sortsub组（d3下降）；
var宽度=600；
var高度=600；
var innerRadius=宽度/2*0.7；
var outerRadius=内半径*1.1；
var color20=d3.scaleOrdinal（d3.schemeCategory20）；
//添加元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//绘制节点
var外部电弧=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
变量组=弦线布局（总体）；
var g_outer=svg.append（“g”）
.attr（“变换”、“平移”（“+width/2+”，“+height/2+”）
.数据（组）；
var group=g_外部追加（“g”）
.attr（“类”、“组”）
.全选（“g”）
.data（函数（和弦）{return chords.groups；}）
.enter（）.append（“g”）；
//添加颜色
group.append（“路径”）
.样式（“填充”，功能（d）{
返回颜色20（d指数）；
})
.样式（“笔划”，功能（d）{
返回颜色20（d指数）；
})
.attr（“d”，外弧）；
//添加文本
组。追加（“文本”）
艾特先生