javascript - D3 数据格式，如可缩放的旭日图

Question

我的数据格式类似于此示例中使用的 flare.json:

我只是想知道 d3 可缩放图表使用什么函数 来获取这种格式的数据

在 flare.json 中是这样的

{
   name: "stuff",
   children: [
    ....
   ]

}

并在示例中将其转换为 this。这是哪条线？

{
  children: Array[17]
  depth: 1
  dx: 0.6028744305756647
  dy: 0.25
  name: "A name would appear here"
  parent: Object
  value: 39850000.06
  x: 0
  y: 0.25
}

图表

    var total_revenue = json.total_revenue;
    json = json.chart_data;
  var width = 840,
      height = width,
      radius = width / 2,
      x = d3.scale.linear().range([0, 2 * Math.PI]),
      y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
      padding = 5,
      duration = 1000;

  var div = d3.select("#chart_render");

  div.select("img").remove();

  var vis = div.append("svg")
      .attr("width", width + padding * 2)
      .attr("height", height + padding * 2)
    .append("g")
      .attr("transform", "translate(" + [radius + padding, radius + padding] + ")");

  var partition = d3.layout.partition()
      .value(function(d) { return d.size });

  var arc = d3.svg.arc()
      .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
      .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
      .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); })
      .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });


    console.log(json);
    var nodes = partition.nodes({children: json});

    var path = vis.selectAll("path").data(nodes);
    path.enter().append("path")
        .attr("id", function(d, i) { return "path-" + i; })
        .attr("d", arc)
        .attr("fill-rule", "evenodd")
        .style("fill", colour)
        .on("click", click);

    var text = vis.selectAll("text").data(nodes);
    var textEnter = text.enter().append("text")
        .style("fill-opacity", function(d) {
            var relative_percent = 0;
            var relative_total = 0;
            //console.log(d);

            if (d.depth != 0) {
                for(var i = 0; i < d.parent.children.length; i++) {
                    relative_total += d.parent.children[i].value;
                }
                //console.log(relative_total);
                relative_percent = d.value/total_revenue*100;

                if (relative_percent > 1) {
                    return '1';
                } else {
                    return '0';
                }
            }
        })
        .style("fill", function(d) {
          return "#fff";
        })
        .attr("text-anchor", function(d) {
          return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
        })
        .attr("dy", ".2em")
        .attr("transform", function(d) {
          var multiline = (d.name || "").split(" ").length > 1,
              angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
              rotate = angle + (multiline ? -.5 : 0);
          return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
        })
        .on("click", click);
    textEnter.append("tspan")
        .attr("x", 0)
        .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
    textEnter.append("tspan")
        .attr("x", 0)
        .attr("dy", "1em")
        .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });

    function click(d) {
      path.transition()
        .duration(duration)
        .attrTween("d", arcTween(d));

      // Somewhat of a hack as we rely on arcTween updating the scales.
      text.style("visibility", function(e) {
            return isParentOf(d, e) && e.value > 1500000 ? null : d3.select(this).style("visibility");
          })
        .transition()
          .duration(duration)
          .attrTween("text-anchor", function(d) {
            return function() {
              return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
            };
          })
          .attrTween("transform", function(d) {
            var multiline = (d.name || "").split(" ").length > 1;
            return function() {
              var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
                  rotate = angle + (multiline ? -.5 : 0);
              return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
            };
          })
          .style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; })
          .each("end", function(e) {
            d3.select(this).style("visibility", function (d) {

          //    var relative_total = 0;
          //    var relative_percent = 0;

                // for(var i = 0; i < d.parent.children.length; i++) {
                //  relative_total += d.parent.children[i].value;
                // }

                // console.log(relative_total);

                // relative_percent = d.value/relative_total*100;
                // console.log(relative_percent);
                return isParentOf(d, e) && e.value > 1500000 ? null : "hidden";
            })
          });
    }

  function isParentOf(p, c) {
    if (p === c) return true;
    if (p.children) {
      return p.children.some(function(d) {
        return isParentOf(d, c);
      });
    }
    return false;
  }

  function colour(d) {

    if (d.depth == 0) {
      return "rgb(250, 250, 250)";
    } else if (d.depth == 1) {
      return 'rgb(86, 135, 209)';
    } else if (d.depth == 2) {
      return 'rgb(222, 120, 59)';
    } else if (d.depth == 3) {
      return 'rgb(106, 185, 117)';
    }

    // if (d.children) {
    //   // There is a maximum of two children!
    //   var colours = d.children.map(colour),
    //       a = d3.hsl(colours[0]),
    //       b = d3.hsl(colours[1]);
    //   // L*a*b* might be better here...
    //   return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.l / 1.2);
    // }
    // return d.colour || "#fff";
  }

  // Interpolate the scales!
  function arcTween(d) {
    var my = maxY(d),
        xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
        yd = d3.interpolate(y.domain(), [d.y, my]),
        yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
    return function(d) {
      return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
    };
  }

  function maxY(d) {
    return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
  }

  // http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
  function brightness(rgb) {
    return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
  }

Answer 1

这一行:

var nodes = partition.nodes({children: json});

设置旭日图的代码说明

用D3的说法，旭日图是基于D3的“分区布局”。实际上，D3“分区布局”在某种程度上是更笼统的术语，因为它不仅可以用于显示旭日图，还可以用于显示其他基于“分区”父级(因此得名“分区”)的想法。这也是注意“布局”和“图表”之间差异的有用示例(在 D3 思维模式中)，但这是另一回事了。

以下两行是初始化分区布局的第一步:

  var partition = d3.layout.partition()
      .value(function(d) { return d.size });

这一行做所有的计算:

var nodes = partition.nodes({children: json});

然后变量节点可用于定义 svg 元素(弧和标签)的实际视觉外观:

var path = vis.selectAll("path").data(nodes);

和

var text = vis.selectAll("text").data(nodes);

这两行代表了一种常被称为“数据绑定(bind)”的东西。它们使程序员能够使用数据来驱动视觉元素，例如以下行:

.text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });

这里，d.name来源于数据，d.depth是分区布局添加的。它们实际上都是节点的一部分。

我试图用简单的术语进行解释，但可能会有一些让您感到困惑的地方 - 别担心，如果您阅读正确的文档和教程，很快就会很清楚。 ;)