小编use*_*394的帖子

如何使用 d3.js 将曲线变成直线以用于层次结构图

源图像

我在 d3.js 中找到了一个带有员工层次结构的示例示例。我在将曲线更改为直线时遇到问题,如下图所示。

var attrs = {
    EXPAND_SYMBOL: '\uf067',    
    COLLAPSE_SYMBOL: '\uf068',
    selector: params.selector,
    root: params.data,
    width: params.chartWidth,
    height: params.chartHeight,
    index: 0,
    nodePadding: 9,
    collapseCircleRadius: 7,
    nodeHeight: 50,
    nodeWidth: 210,
    duration: 750,
    rootNodeTopMargin: 20,
    minMaxZoomProportions: [0.05, 3],
    linkLineSize: 180,
    collapsibleFontSize: '10px',
    userIcon: '\uf007',
    nodeStroke: "#ccc",
    nodeStrokeWidth: '1px'
  }

var diagonal = d3.svg.diagonal()
    .projection(function(d) {      
      return [d.x + attrs.nodeWidth / 2, d.y + attrs.nodeHeight / 2];
    });
Run Code Online (Sandbox Code Playgroud)

我已经尝试过上面的两个代码。我无法得到如下图所示的曲线。你能帮我解决这个问题吗?

目标图像
(来源:noaa.gov

下面的链接是图表参考链接。

员工层次结构图

javascript svg d3.js

6
推荐指数
1
解决办法
1006
查看次数

标签 统计

d3.js ×1

javascript ×1

svg ×1