Question

当我画一个和弦时，我在d3 v4中遇到了一些问题。问题是＆＃39; Uncaught TypeError：g_outer.selectAll（...）。data（...）。enter不是函数＆＃39;在我的代码中的第53位。但是当我看到源代码引用https://bost.ocks.org/mike/uberdata/和https://github.com/d3/d3/blob/master/CHANGES.md#chords-d3-chord时。我修改了一些错误，但它仍然无法正常工作。这是我的代码：

 <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>

我想画一个这样的和弦：

但是在Google Chrome中，和弦无法显示。我是d3的新手，你能帮助我吗？如果你给我一个好主意，我将不胜感激！三江源！

Answer 1

你的代码中有很多错误。最大的问题是你不了解if函数的工作原理。 if(Long.parseLong(splitData[0]) == oid) { isParent = true; break; }中的一般流程是在为其提供任何数据之前设置布局函数。在你的情况下像这样：

d3.chord

在解决之后，我将此example与您的代码混合以生成：

d3

当我想画一个和弦时d3 v4有些麻烦

1 个答案: