D3 - 耀斑未显示所有数据答案

【问题标题】：D3 - flare not showing all dataD3 - 耀斑未显示所有数据
【发布时间】：2018-03-26 13:58:05
【问题描述】：

这是我正在使用的代码。我在 php 中生成数据并通过 json 将其发送到 d3：

php 文件：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: #fff;
}

</style>
<body>
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js">        </script>
  <script type="text/javascript" src="flare.js"></script>

<?php

// Move php data to JSON to be used in d3 apps

$flare_child_1 = array("name"=> "subchild1", "size"=> 90);
$flare_child_2 = array("name"=> "subchild2", "size"=> 10);
$flare_child_3 = array("name"=> "subchild3", "size"=> 55);
$flare_child_4 = array("name"=> "subchild4", "size"=> 72);
$flare_child_5 = array("name"=> "subchild5", "size"=> 60);
$flare_children_1[] =  $flare_child_1;
$flare_children_1[] =  $flare_child_2;
$flare_children_1[] =  $flare_child_3;
$flare_children_1[] =  $flare_child_4;
$flare_children_1[] =  $flare_child_5;
$flare_children[] = array('name'=> "first", 'children'=>$flare_children_1);
$flare = array('name'=> "flare", 'children'=>$flare_children);



echo "<script> var root = "; echo json_encode($flare); echo ";"; 
echo "input_data(root);</script>"; 

?>

</body>

js文件

var width = 960,
    height = 700,
    radius = (Math.min(width, height) / 2) - 10;

var formatNumber = d3.format(",d");

var x = d3.scale.linear()
    .range([0, 2 * Math.PI]);

var y = d3.scale.sqrt()
    .range([0, radius]);

var color = d3.scale.category20c();

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, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });



function getRootmostAncestorByRecursion(node) {
    return node.depth > 1 ? getRootmostAncestorByRecursion(node.parent) : node;
}

function input_data(root) {
  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");

  svg.selectAll("path")
    .data(partition.nodes(root))
    .enter().append("path")
    .attr("d", arc)
    .style("fill", function(d) {
      return color(getRootmostAncestorByRecursion(d).name);
    })
    .on("click", click)
    .append("title")
    .text(function(d) {
      return d.name + "\n" + formatNumber(d.value);
    });
}


function click(d) {
  svg.transition()
      .duration(750)
      .tween("scale", function() {
        var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
            yd = d3.interpolate(y.domain(), [d.y, 1]),
            yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
        return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };
      })
    .selectAll("path")
      .attrTween("d", function(d) { return function() { return arc(d);}; });
}

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

我期待与https://bl.ocks.org/mbostock/raw/4348373/类似的东西

但我看到的只是一个蓝点。孩子们没有特色。我不确定我做错了什么。

感谢您查看此内容。

【问题讨论】：

免责声明，我对php一无所知。 <?php 是否在 <script type="text/javascript" src="flare.js"></script> 之前执行？
没有

标签： d3.js

【解决方案1】：

这里有几个问题。

首先，虽然你是正确的路径创建被包装在一个函数中，并将在php 代码之后执行，但你的svg 创建将在 before 正文标记之前执行，所以你永远不会获取svg 标签。

其次，您的 JSON 格式不正确。我执行了php，它产生了：

<script>
var root = {
  "name": "flare",
  "children": {
    "name": "first",
    "children": [{
      "name": "subchild1",
      "size": 90
    }, {
      "name": "subchild2",
      "size": 10
    }, {
      "name": "subchild3",
      "size": 55
    }, {
      "name": "subchild4",
      "size": 72
    }, {
      "name": "subchild5",
      "size": 60
    }]
  }
};
input_data(root);

注意，第一个children 是一个对象，而不是一个对象数组。

把这两件事放在一起here。

【讨论】：

非常感谢您的帮助。