强制定向d3缩放和平移仅适用于除节点之外的链路路径

Question

我尝试将缩放和平移应用到我的力导向布局图，但它只适用于链接，节点不带链接，并且每次我缩放和平移时似乎都是浮动的。

var width = 960,
height = 500,
root;

var force = d3.layout.force()
.linkDistance(90)
.charge(-1000)
.gravity(.100)
.size([width, height])
.on("tick", tick);

function zoom() {
console.log("here", d3.event.translate, d3.event.scale);
console.log("transform", d3.event.translate, d3.event.scale);
//vis.attr("transform", transform);
node.attr("transform", transform);
link.attr("transform", transform);
}

function transform(d) {
return "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")";
}

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().on("zoom", zoom));

var link = svg.selectAll(".link"),
node = svg.selectAll(".node");

var div = d3.select("body")
.append("div") // declare the tooltip div 
.attr("class", "tooltip")
.style("opacity", 0);
svg.style("cursor", "move");


function readfile(json) {
root = json;
update();
};

function update() {

var nodes = flatten(root),
    links = d3.layout.tree().links(nodes);

// Restart the force layout.
force.nodes(nodes)
    .links(links)
    .start();

// Update links.
link = link.data(links, function (d) {
    return d.target.id;
});

link.exit().remove();

link.enter().insert("line", ".node")
    .attr("class", "link")
    .style("stroke", function (d) {
    return d.target.level;
});

// Update nodes.
node = node.data(nodes, function (d) {
    return d.id;
});

node.exit().remove();

var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .call(force.drag);

var defs = node.append("defs").attr("id", "imgdefs");

var imgPattern = defs.append("pattern")
    .attr("id", "imgPattern")
    .attr("height", 30)
    .attr("width", 30)
    .attr("x", "0")
    .attr("y", "0");

imgPattern.append("image")
    .attr("height", 30)
    .attr("width", 30)
    .attr("xlink:href", function (d) {
    return d.image;
});

node.select("circle")
    .style("fill", "url(#imgPattern)");

nodeEnter.append("circle")
    .attr("r", 15)
    .style("stroke", color)
    .style("stroke-width", 4)
    .style("fill", "url(#imgPattern)")
    .on("mouseover", function (d) {

    circlePos = this.getBoundingClientRect();

    div.transition()
        .duration(500)
        .style("opacity", 1)
        .style("cursor", "pointer")
        .style("left", (circlePos.left + circlePos.width + window.scrollX) + 'px')
        .style("top", (circlePos.top + window.scrollY) + 'px')
        .style("position", "absolute")

    div.html(
        "<div style='position: absolute; border:2px solid red; background-color: yellow; z-index=-1'>" +
        "<div class='container'>" +
        "<div id='wrap'>" +
        "<div class='col-md-3'>" +
        "<div class='g-hover-card'>" +
        "<div class='user-avatar'>" +
        "<img src='" + d.image + "' alt='' style='margin-top:50px;'/>" +
        "</div>" +
        "<div class='info'>" +
        "<div class='description'>" +
        "<font size='5px' color='black'>" + d.name + "</font>" +

        "</div>" +
        "</div>" +
        "<div class='bottom'>" +
        "<br/>" +
        "<a id='thisLink' onclick=\"window.open('http://facebook.com/" + d.pid + "');\" >" + "Follow on Facebook" +
        "</a>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>")
    $('#thisLink').click(function (e) {
        window.location = "<?php echo base_url();?>index.php/Iconnect/generate_tree";
        window.location.reload();
    });

})
    .on("mouseout", function (d) {
    div.transition()
        .duration(500)
        .style("opacity", 0)
        .each('end', function (d) {
        d3.select(this).html("");
    });
});
div.on("mouseover", function (d) {
    d3.select(this).transition()
        .duration(500)
        .style("opacity", .9);
})
    .on("mouseout", function (d) {
    d3.select(this).transition()
        .duration(500)
        .style("opacity", 0)
        .each('end', function (d) {
        d3.select(this).html("");
    });
});

nodeEnter.append("text")
    .attr("dy", ".35em")
    .text(function (d) {
    return d.name;
});
}

function tick() {
link.attr("x1", function (d) {
    return d.source.x;
})
    .attr("y1", function (d) {
    return d.source.y;
})
    .attr("x2", function (d) {
    return d.target.x;
})
    .attr("y2", function (d) {
    return d.target.y;
});

node.attr("transform", function (d) {
    return "translate(" + d.x + "," + d.y + ")";
});
}

function color(d) {
return d._children ? "#800000" // collapsed package
:
d.children ? "#008000" // expanded package
:
d.parentNode ? "#000000" : "#68228b"; // leaf node
}

 // Toggle children on click
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
    d._children = d.children;
    d.children = null;
} else {
    d.children = d._children;
    d._children = null;
}
update();
}

// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [],
    i = 0;

function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
}

recurse(root);
return nodes;
}

这是我到目前为止所做的jsfiddle sample。

如何实现节点的图形缩放和平移以使用链接路径？

并且默认情况下节点是否可以粘贴我已经看过一个样本，其中节点只有在被拖动时才会粘住;因为我使用的json数据是动态的，所以如果有大量的数据，图表看起来有点混乱，因为它的移动。