D3.js - 加载和操作外部数据

Question

我是D3.js的新手并且正在玩各种教程/练习/等等,但我对D3的基本需求是加载外部数据(通常是JSON)并根据该数据绘制一些交互式图表.

基本森伯斯特的例子在这里:

我成功地将它改编为我自己的数据.但是,我希望简化数据的传递并处理D3.js中的一些操作.例如,我想提供一个可以根据需要由D3操纵的平面数据文件,而不是为旭日图准备好的分层数组.

但是,我不确定如何在D3的一个数据函数之外绘制一个旭日图表.我尝试了下面的代码,而不是通过json加载数据包括它内联所以结构是可见的(不出所料它不起作用):

var w = 960, 
    h = 700, 
    r = Math.min(w, h) / 2, 
    color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h) 
       .append("svg:g") 
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var partition = d3.layout.partition() 
    .sort(null) 
    .size([2 * Math.PI, r * r]) 
    .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 data = [ 
                        {'level1': 'Right Triangles and an Introduction to Trigonometry', 
'level2': '', 'level3': '', 'level4': '', 'branch': 'TRI', 'subject': 
'MAT'}, 
                        {'level1': '', 'level2': 'The Pythagorean Theorem', 'level3': '', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
                        {'level1': '', 'level2': '', 'level3': 'The Pythagorean Theorem', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
                        {'level1': '', 'level2': '', 'level3': 'Pythagorean Triples', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'} 
                        ]; 
console.log(data); // looks good here 
var nest = d3.nest() 
        .key(function(d) { return d.subject;}) 
        .key(function(d) { return d.branch;}) 
        .entries(data); 
console.log(nest); // looks good here 
var path = vis.selectAll("path") 
      .data(nest) 
    .enter().append("svg:path") 
      .attr("display", function(d) { return d.depth ? null : 
"none"; }) // hide inner ring 
      .attr("d", arc) 
      .attr("fill-rule", "evenodd") 
      .style("stroke", "#fff") 
      .style("fill", function(d) { return color((d.children ? d : 
d.parent).name); }); 

这是HTML的样子:

<div class="gallery" id="chart">
    <svg width="960" height="700">
        <g transform="translate(480,350)">
            <path display="none" d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNL0,0Z" fill-rule="evenodd" style="stroke: #ffffff; "/>
        </g>
    </svg>
</div>

我确定我做错了很简单,但是如果我没有在一个函数中嵌套绘图函数,我就无法理解D3如何遍历所有数据并绘制图表像d3.json.

有什么想法吗？

Answer 1

看起来您忘记调用partition.nodes(nest)以适当的布局位置填充数据来渲染路径。

\n\n

在您链接到的sunburst 示例中，JSON 数据的绑定如下：

\n\n

var path = vis.data([json]).selectAll("path")\n    .data(partition.nodes)\n  .enter().append("path")\n    // \xe2\x80\xa6\n

\n\n

这相当于：

\n\n

var path = vis.selectAll("path")\n    .data(partition.nodes(json))\n  .enter().append("path")\n    // \xe2\x80\xa6\n

\n\n

两种方法都可以，但是您需要partition.nodes 在某个地方调用，否则数据将没有位置。

\n\n

另请注意，具有指定嵌套的示例数据将生成具有单个节点的层次结构，因为所有指定的嵌套字段都是相同的。

\n