Charts d3.json将数据传递给d3.svg.arc（）_Charts_Svg_D3.js

Charts d3.json将数据传递给d3.svg.arc（）

charts svg d3.js

Charts d3.json将数据传递给d3.svg.arc（）,charts,svg,d3.js,Charts,Svg,D3.js,我不是一个很强的JS用户，但我想制作这样的“夜莺图”：我有这样的密码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.v2.js"></script> <style type="text/css"> .arc{ fill: pink; stroke:

我不是一个很强的JS用户，但我想制作这样的“夜莺图”：我有这样的密码：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="d3.v2.js"></script>
    <style type="text/css">
        .arc{
            fill: pink;
            stroke: red;
        }
    </style>
  </head>
  <body>
    <div id="chart" class="chart"></div>
    <div id="table"></div>
    <script type="text/javascript">
      var svg = d3.select("#chart").append("svg").attr("width", 900).attr("height", 600);
      var pi = Math.PI;

      d3.json(
          'data.json',
          function(data){
            var arc = d3.svg.arc()
                .innerRadius(50)
                .outerRadius(function(d) { 
                    return (50 + d.value); 
                })
                .startAngle(function(d) { return ((d.time - 1) * 30 * pi / 180); })
                .endAngle(function(d) { return (d.time * 30 * pi / 180 ); });

            var chartContainer = svg.append("g")
                .attr('class', 'some_class')
                .attr("transform", "translate(450, 300)");

            chartContainer.append("path")
                .data(data)
                .attr("d", arc)
                .attr("class", "arc");
          }
      );
    </script>
  </body>
</html>

但我的剧本只画了一条弧线。有人能帮你解决这个问题吗？

你可能想看看。添加数据驱动元素的D3模式是使用

selectAll

创建一个选择，然后使用

data

设置数据，然后将元素附加到

.enter（）

选择中。所以

chartContainer.append("path")
    .data(data)
    .attr("d", arc)
    .attr("class", "arc");

需要

chartContainer.selectAll("path")
    .data(data)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc");

请参阅更新的小提琴：

chartContainer.selectAll("path")
    .data(data)
  .enter().append("path")
    .attr("d", arc)
    .attr("class", "arc");