评论：tree 树状图 d3.js 生成svg 3.x  [查看原文]

池小洋丶0
2019/7/25 12:54:41
写条件判断就好了呀

 //箭头
 var marker =
     svg.append("marker")
     .attr("id", "resolved")
     .attr("markerUnits", "userSpaceOnUse")
     .attr("viewBox", "0 -5 10 10") //坐标系的区域
     .attr("refX", 0) //箭头坐标
     .attr("refY", -1)
     .attr("markerWidth", 12) //标识的大小
     .attr("markerHeight", 12)
     .attr("orient", "auto") //绘制方向，可设定为：auto（自动确认方向）和 角度值
     .attr("stroke-width", 2) //箭头宽度
     .append("path")
     .attr("d", "M0,-5L10,0L0,5") //箭头的路径
     .attr('fill', '#000000'); //箭头颜色



 // (2-8) 增加新连接
 link.enter().("path", "g")
     .attr("class", "link")
     .attr("d", function(d) {
         var o = {
             x: source.x0,
             y: source.y0
         };
         return diagonal({
             source: o,
             target: o
         });
     })
     .attr("marker-end", "url(#resolved)"); // path 引入箭头

 第一个圆点也会移位，
 if 判断一下
     .attr('cx', function(d, i) {
         console.log(i)
         if (i !== 0) {
             return 15
         }
     })

转自qq群中一位大佬的分享

// 点击节点 以当前节点位置居中 位置可以调试
// svg.attr('transform', 'translate(' + (width / 4 - d.y0) + ', ' + (height / 2 - d.x0) + ')')
// zoom.translate([(width / 4 - d.y0), (height / 2 - d.x0)])

反方向

// svg.attr('transform', 'translate(' + (width / 4 + d.y0) + ', ' + (height / 2 - d.x0) + ')')
// zoom.translate([(width / 4 + d.y0), (height / 2 - d.x0)])

池小洋丶1
2019/4/23 19:02:17
提示框的offsetY/offsetX 换成layerY/layerX 只兼容到了ie10

池小洋丶0
2019/4/30 18:01:41

function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update(d); // 重新渲染
    svg.attr('transform', 'translate(' + (width / 4 - d.y0) + ', ' + (height / 2 - d.x0) + ')')
    zoom.translate([(width / 4 - d.y0), (height / 2 - d.x0)])
}