个人中心
gpt4 book ai didi

javascript - 创建 sunburst 以接受 csv 数据

转载 作者：行者123 更新时间：2023-12-03 05:48:12 25 4
gpt4 key购买 nike

我可能在学会走路之前尝试过运行，但我使用了以下两个引用:

http://codepen.io/anon/pen/fcBEe

https://bl.ocks.org/mbostock/4063423

从一开始，我就尝试使用函数 buildHierarchy(csv) 将 csv 文件输入到 sunburst 中。其余代码来自 Mike Bostock 的示例。

我已将数据范围缩小到非常简单的范围，如下所示:

var text = 
    "N-CB,50\n\
     N-TrP-F,800\n";

所以我认为这会产生三个同心环 - 确实如此 - 但我希望内环能够按照数据中的 800:50 比例进行分割。为什么我会得到我现在得到的戒指？

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  #sunBurst {
    position: absolute;
    top: 60px;
    left: 20px;
    width: 250px;
    height: 300px;
  }
  
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: auto;
    position: relative;
    width: 250px;
  }
  
  form {
    position: absolute;
    right: 20px;
    top: 30px;
  }
</style>
<form>
  <label>
    <input type="radio" name="mode" value="size" checked> Size</label>
  <label>
    <input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="//d3js.org/d3.v3.min.js"></script>
<div id="sunBurst"></div>
<script>

  var text = 
    "N-CB,50\n\
     N-TrP-F,800\n";


  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);


  var width = 300,
    height = 250,
    radius = Math.min(width, height) / 2,
    color = d3.scale.category20c();

  //this bit is easy to understand:
  var svg = d3.select("#sunBurst").append("svg")

  .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr({
      'transform': "translate(" + width / 2 + "," + height * .52 + ")",
      id: "sunGroup"
    });

  // it seems d3.layout.partition() can be either squares or arcs
  var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, radius * radius])
    .value(function(d) {
      return 1;
    });

  var arc = d3.svg.arc()
    .startAngle(function(d) {
      return d.x;
    })
    .endAngle(function(d) {
      return d.x + d.dx;
    })
    .innerRadius(function(d) {
      return Math.sqrt(d.y);
    })
    .outerRadius(function(d) {
      return Math.sqrt(d.y + d.dy);
    });



  var path = svg.data([json]).selectAll("path")
    .data(partition.nodes)
    .enter()
    .append("path")
    .attr("display", function(d) {
      return d.depth ? null : "none";
    })
    .attr("d", arc)
    .style("stroke", "#fff")
    .style("fill", function(d) {
      return color((d.children ? d : d.parent).name);
    })
    .attr("fill-rule", "evenodd")
    .style("opacity", 1)
    .each(stash);



  d3.selectAll("input").on("change", function change() {
    var value = this.value === "size" ? function() {
      return 1;
    } : function(d) {
      return d.size;
    };

    path
      .data(partition.value(value).nodes)
      .transition()
      .duration(2500)
      .attrTween("d", arcTween);
  });
  //});

  // Stash the old values for transition.
  function stash(d) {
    d.x0 = d.x;
    d.dx0 = d.dx;
  }

  // Interpolate the arcs in data space.
  function arcTween(a) {
    var i = d3.interpolate({
      x: a.x0,
      dx: a.dx0
    }, a);
    return function(t) {
      var b = i(t);
      a.x0 = b.x;
      a.dx0 = b.dx;
      return arc(b);
    };
  }

  d3.select(self.frameElement).style("height", height + "px");


  // Take a 2-column CSV and transform it into a hierarchical structure suitable
  // for a partition layout. The first column is a sequence of step names, from
  // root to leaf, separated by hyphens. The second column is a count of how 
  // often that sequence occurred.
  function buildHierarchy(csv) {
    var root = {
      "name": "root",
      "children": []
    };
    for (var i = 0; i < csv.length; i++) {
      var sequence = csv[i][0];
      var size = +csv[i][1];
      if (isNaN(size)) { // e.g. if this is a header row
        continue;
      }
      var parts = sequence.split("-");
      var currentNode = root;
      for (var j = 0; j < parts.length; j++) {
        var children = currentNode["children"];
        var nodeName = parts[j];
        var childNode;
        if (j + 1 < parts.length) {
          // Not yet at the end of the sequence; move down the tree.
          var foundChild = false;
          for (var k = 0; k < children.length; k++) {
            if (children[k]["name"] == nodeName) {
              childNode = children[k];
              foundChild = true;
              break;
            }
          }
          // If we don't already have a child node for this branch, create it.
          if (!foundChild) {
            childNode = {
              "name": nodeName,
              "children": []
            };
            children.push(childNode);
          }
          currentNode = childNode;
        } else {
          // Reached the end of the sequence; create a leaf node.
          childNode = {
            "name": nodeName,
            "size": size
          };
          children.push(childNode);
        }
      }
    }
    return root;
  };
</script>

plunker 上还有一个进一步的实例:https://plnkr.co/edit/vqUqDtPCRiSDUIwfCbnY?p=preview

最佳答案

您的 buildHierarchy 函数会考虑空格。所以，当你写 

  var text = 
    "N-CB,50\n\
     N-TrP-F,800\n";

它实际上是两个根节点:

'N' and '     N'

您有两个选择:

  1. 使用非空白文本，如 

     var text = 
        "N-CB,50\n" +
        "N-TrP-F,800\n";

  2. 修复 buildHierarchy 函数以 trim 空格。

关于javascript - 创建 sunburst 以接受 csv 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40247642/

25 4 0
文章推荐： http-headers - 来自 User-Agent HTTP header 的操作系统
文章推荐： php - 正则表达式以匹配Youtube URL
文章推荐： php - 直接上载Zend PHP:如何禁用对正在上载的视频的评论？
文章推荐： docker - istio 会增加对 docker swarm 的支持吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com