d3.js - How to select multiple svg texts in a single customized zoom function -
d3.js - How to select multiple svg texts in a single customized zoom function -
i working on zoom function of d3 not able zoom on 2 different text(labels). text code: (they working)
var texts = canvas.selectall("text") .data(nodes) .enter(); texts.append("text") .attr("class", function(d) { homecoming d.children ? "parent" : "child"; }) .attr("x", function(d) { homecoming d.x; }) .attr("y", function(d) { homecoming d.y; }) .attr("dy", ".35em") .attr("text-anchor", "middle") .style("opacity", function(d) { homecoming d.r > 20 ? 1 : 0; }) .text(function(d) {return d.children ? "" : d.name;; }); texts.append("text") .attr("class", function(d) { homecoming d.children ? "parent" : "child"; }) .attr("x", function(d) { homecoming d.x ; }) .attr("y", function(d) { homecoming d.y + 20; }) // not overlapping name , title .attr("dy", ".45em") .style("opacity", function(d) { homecoming d.r > 20 ? 1 : 0; }) .text(function(d) {return d.children ? "" : d.title; });
zoom code: (second part not working)
function zoom(d, i) { var k = r / d.r / 2; x.domain([d.x - d.r, d.x + d.r]); y.domain([d.y - d.r, d.y + d.r]); var t = canvas.transition() .duration(d3.event.altkey ? 7500 : 750); t.selectall("text") .attr("x", function(d) { homecoming x(d.x); }) .attr("y", function(d) { homecoming y(d.y); }) .style("opacity", 0.15 }); t.selectall("text") .attr("x", function(d) { homecoming x(d.x); }) .attr("y", function(d) { homecoming y(d.y) + 20 }) .style("opacity", 0.15 }); }
now question how maintain displacement (d.y + 20; }) done in text2 part both of them overlapping during zoom operation... used variable instead of using text none of them worked.. help
svg d3.js zoom
Comments
Post a Comment