小编Joh*_*ith的帖子

如何使用D3对角线功能绘制曲线?

我查看了示例http://bl.ocks.org/mbostock/raw/4063570/:

在此输入图像描述

它从源到目标从左到右生成很好的合并线.

在我的情况下,我需要手动布局节点并放置x,y坐标.在这种情况下,线路不会在源节点处合并.以下是重现此问题的测试代码:

var data = [ {name: "p1", children: [{name: "c1"}, {name: "c2"}, {name: "c3"}, {name: "c4"}]}];
var width = 400, height = 200, radius = 10, gap = 50;

// test layout
var nodes = [];
var links = [];
data.forEach(function(d, i) {
    d.x = width/4;
    d.y = height/2;
    nodes.push(d);
    d.children.forEach(function(c, i) {
        c.x = 3*width/4;
        c.y = gap * (i +1) -2*radius;
        nodes.push(c);
        links.push({source: d, target: c});
    })
})

var color = d3.scale.category20();

var svg …
Run Code Online (Sandbox Code Playgroud)

javascript svg curve d3.js

19
推荐指数
2
解决办法
2万
查看次数

如何处理D3中嵌套多个级别的数据?

我有以下数据结构

 { key: 'a', 
   values: { key: 'a0', 
             values: { key: 'a00',
                       values: {...}
                     },
                     { key: 'a01',
                       values: {...}
                     }
           },
           { key: 'a1', 
             values: {...}
           }
 }, 
 { key: 'b',
   values: {...}
 }
Run Code Online (Sandbox Code Playgroud)

我看到了处理两级嵌套的示例,可以按照它们来处理数据.我只需要为每个元素绘制带有键属性的矩形,并根据该对象的其他一些属性确定其颜色和位置.这是接近我想要做的示例代码

var data = [
    {
        key : 'dept1',
        values : [
            {
                key : 'group-1-1',
                values : [
                    {
                        key : 'emp-1-1-1',
                        salary : 10000
                    },
                    {
                        key : 'emp-1-1-2',
                        salary : 20000
                    },
                    {
                        key : 'emp-1-1-3',
                        salary : 30000
                    },
                    {
                        key …
Run Code Online (Sandbox Code Playgroud)

d3.js

5
推荐指数
1
解决办法
2756
查看次数

标签 统计

d3.js ×2

curve ×1

javascript ×1

svg ×1