文章/答案/技术大牛

发布

社区首页 >问答首页 >当我想要绘制和弦时，在d3 v4中遇到一些麻烦

问当我想要绘制和弦时，在d3 v4中遇到一些麻烦
EN

Stack Overflow用户

提问于 2016-12-16 19:38:51

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

我在d3 v4中绘制和弦时遇到了一些问题。问题是“TypeError: g_outer.selectAll(...).data(...).enter不是一个函数”，在我的代码的第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的，你能帮我吗？如果你能给我一个好主意，我将不胜感激！谢谢！

javascript

google-chrome

d3.js

回答 1

Stack Overflow用户

发布于 2016-12-17 22:11:51

你的代码中有一大堆错误。最大的问题是你不了解d3.chord函数是如何工作的。d3中的一般流程是在提供任何数据之前设置布局函数。在您的示例中，如下所示：

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

var groups = chord_layout(population);

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

<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()
      .padAngle(0.03)
      .sortSubgroups(d3.descending);

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

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

    var groups = chord_layout(population);

    var g_outer = svg.append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .datum(groups);

    var group = g_outer.append("g")
      .attr("class", "groups")
      .selectAll("g")
      .data(function(chords) { return chords.groups; })
      .enter().append("g");

    //add color
    group.append("path")
      .style("fill", function(d) {
        return color20(d.index);
      })
      .style("stroke", function(d) {
        return color20(d.index);
      })
      .attr("d", outer_arc);

    //add text
    group.append("text")
      .attr("dy", ".35em") //width
      .attr("transform", function(d,i) { //angle
        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
        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);

    g_outer.append("g")
      .attr("class", "ribbons")
      .selectAll("path")
      .data(function(chords) { return chords; })
      .enter().append("path")
      .attr("d", inner_chord)
      .style("fill", function(d) {
        return color20(d.source.index);
      })
      .style("stroke", "black")
      .style("opacity", 0.6)
      .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>

票数 2

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

原文链接：

https://stackoverflow.com/questions/41183565

复制

相似问题

问当我想要绘制和弦时，在d3 v4中遇到一些麻烦
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我想要绘制和弦时，在d3 v4中遇到一些麻烦EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我想要绘制和弦时，在d3 v4中遇到一些麻烦
EN