d3 cluster项目中需要改变左侧集群图的高度，然后右侧的正方形矩阵变得大一些，不免会想到去修改树状图的path d

背景：用d3画聚类图

一些demo分享给大家～

bl.ocks.org/mbostock/40…

bl.ocks.org/mbostock/43…

bl.ocks.org/mbostock/c0… （最终是用的这个demo优化的）

要求是每个格子的高度都是不一样的，根据后端传来的height做聚类

最终实现上图效果～ ⬆️⬆️

看起来 demo 的结构就是我们所要的，但是人家是极坐标的，并不是直角坐标系

改了很久试了很多方法，最终把它的极坐标换算转化为直角坐标系计算方式

return "M" + startRadius  + "," + startAngle
            + (endAngle === startAngle ? "" : "L" + startRadius  + "," + endAngle)
            + "L" + endRadius  + "," + endAngle;

效果如下：

另外，这里学习一下svg的几个path属性：

justcode.ikeepstudying.com/2015/07/svg…

blog.csdn.net/qq_30668579…

Ps: svg example : M A L

<svg xmlns="http://www.w3.org/2000/svg">

            <path d="M50,50A30,50 0 0,1 100,100L150,150"style="stroke:pink; fill:none;"/>

      </svg>

最终实现效果：

ps：

项目中需要改变左侧集群图的高度，然后右侧的正方形矩阵变得大一些，不免会想到去修改树状图的path d 属性... 然鹅并无效，最后发现只要更改这个参数就可以让整体图变大

var cluster = d3.cluster()
          .size([700, innerRadius])      //  改这里的 size 
          .separation(function(a, b) { return 1; });