0

我正在使用来自 django 后端的 jsonresponse 创建气泡图。数据正确到达脚本，但图表未显示，因为其中一个属性存在问题。这是代码：

<script type="text/javascript">
  dataarr = d3.json("{% url 'find_arr'%}", function(dataarr){
    dataarr.forEach(function(d){
      console.log(d)
    })
  })


  dataset = {
      "children": dataarr
  };

  var diameter = 600;
  var color = d3.scaleOrdinal(d3.schemeCategory20);

  var bubble = d3.pack(dataset)
      .size([diameter, diameter])
      .padding(1.5);

  var svg = d3.select("body")
      .append("svg")
      .attr("width", diameter)
      .attr("height", diameter)
      .attr("class", "bubble");

  var nodes = d3.hierarchy(dataset)
      .sum(function(d) { return d.Count; });

  var node = svg.selectAll(".node")
      .data(bubble(nodes).descendants())
      .enter()
      .filter(function(d){
          return  !d.children
      })
      .append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
      });

  node.append("title")
      .text(function(d) {
          return d.Name + ": " + d.Count;
      });

  node.append("circle")
      .attr("r", function(d) {
          return d.r;
      })
      .style("fill", function(d,i) {
          return color(i);
      });

  node.append("text")
      .attr("dy", ".2em")
      .style("text-anchor", "middle")
      .text(function(d) {
          // return d.Name.substring(0, d.r / 3);
          return d.Name;
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", function(d){
          return d.r/5;
      })
      .attr("fill", "white");

  node.append("text")
      .attr("dy", "1.3em")
      .style("text-anchor", "middle")
      .text(function(d) {
          return d.Count;
      })
      .attr("font-family",  "Gill Sans", "Gill Sans MT")
      .attr("font-size", function(d){
          return d.r/5;
      })
      .attr("fill", "white");

  d3.select(self.frameElement)
      .style("height", diameter + "px");
</script>

控制台显示以下错误：错误：属性 r：预期长度，“NaN”。

输入为以下格式：

 dataarr = [

            { Name: "A", Count: .08167 },
            { Name: "B", Count: .01492 },
            { Name: "C", Count: .02780 },
            { Name: "D", Count: .04253 },
            { Name: "E", Count: .04623 }

         ]
4

0 回答 0