javascript - Why are these labels not visible -
i have visual of double-ringed pie chart. i've added following try add labels outside chart:
var arcs = svg.selectall(".thearc") arcs.append("text") .attr("transform", function(d) { var c = arc.centroid(d), x = c[0], y = c[1], // pythagorean theorem hypotenuse h = math.sqrt(x * x + y * y); console.log(c, h) return "translate(" + (x / h * labelr) + ',' + (y / h * labelr) + ")"; }) .attr("text-anchor", "middle") .text(function(d,i) { if (d.name !== 'root') { return "hello" + d.name; } }) .attr("class", "thetxtsouter") i can see text in inspector not rendered on page - why text not visible?
here plunk of visual: http://plnkr.co/edit/cnump1mg0xrxxrcur0ot?p=preview
here fill code function creates pie chart:
function piechart(datafile) { var plot; var vis; var width = 400, height = 400, radius = math.min(width, height) / 2.1, color = d3.scale.ordinal() .range(["#338aba", "#016da9", "#4c96d5"]) .domain([0, 2]); var labelr = radius + 5 // radius label anchor var div = d3.select("body") .append("div") .attr("class", "tooltip"); var arc = d3.svg.arc() .startangle(function(d) { return d.x; }) .endangle(function(d) { return d.x + d.dx; }) .outerradius(function(d) { return (d.y + d.dy) / (radius); }) .innerradius(function(d) { return d.y / (radius); }); //check if svg exists plot = d3.select("#svgpiechart") if (plot.empty()) { vis = d3.select("#piechart") .append("svg") .attr({ id: "svgpiechart" }) } else { vis = d3.select("#svgpiechart") vis.selectall("*").remove(); }; //group of svg element var svg = vis .append("g") .attr({ 'transform': "translate(" + width / 2 + "," + height * .52 + ")" }); //svg element vis.attr({ //set width , height of our visualization (these attributes of <svg> tag width: width, height: height }); d3.text(datafile, function(text) { var csv = d3.csv.parserows(text); var json = buildhierarchy(csv); // seems d3.layout.partition() can either squares or arcs var partition = d3.layout.partition() .sort(null) .size([2 * math.pi, radius * radius]) .value(function(d) { return d.salesrev; }); var path = svg.data([json]).selectall(".thearc") .data(partition.nodes) .enter() .append("path") .attr("class", "thearc") .attr("id", function(d, i) { return "thearc_" + i; }) //give each slice unique id .attr("display", function(d) { return d.depth ? null : "none"; }) .attr("d", arc) .style("stroke", "#fff") .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) .attr("fill-rule", "evenodd") .style("opacity", 0.01) .style("stroke-opacity", 0.01) .each(stash); path.transition() .duration(pieobj.transtime) .style("opacity", 1) .style("stroke-opacity", 1) path .on("mouseout", mouseout) .on("mousemove", function(d) { div.style("left", d3.event.pagex + 10 + "px"); div.style("top", d3.event.pagey - 25 + "px"); div.style("display", "inline-block"); div.html(d.name + "<br>" + pieobj.formatshrtint(d.salesrev)); }) var txts = svg.data([json]).selectall(".thetxts") .data(partition.nodes) .enter() .append("text"); txts .attr("class", "thetxts") .attr("dx", 10) //move text start angle of arc .attr("dy", 15) //move text down .style("opacity", 0) txts .transition() .duration(pieobj.transtime) .style("opacity", 1); var txtpths = txts.append("textpath") // .attr("xlink:href", function(d, i) { .attr("href", function(d, i) { return "#thearc_" + i; }) .text(function(d) { if (d.name === 'root') { return; } else if ((d.depth === 1) && (d.dx < (d.name.length * 0.15))) { return; } else if ((d.depth === 2) && (d.dx < (d.name.length * 0.1))) { return; } else { return d.name; } }); /* ------- text labels outside pie-------*/ var arcs = svg.selectall(".thearc") arcs.append("text") .attr("transform", function(d) { var c = arc.centroid(d), x = c[0], y = c[1], // pythagorean theorem hypotenuse h = math.sqrt(x * x + y * y); console.log(c, h) return "translate(" + (x / h * labelr) + ',' + (y / h * labelr) + ")"; }) .attr("text-anchor", "middle") .text(function(d,i) { if (d.name !== 'root') { return "hello" + d.name; } }) .attr("class", "thetxtsouter") /* ----------------------------------------*/ d3.selectall("input").on("change", function change() { function createvaluefunc(val) { // currentmeasure = val; return function(d) { return d[val]; }; } value = createvaluefunc(this.value); pieobj.currentmeasure = this.value; var path2 = svg.data([json]).selectall(".thearc"); path2 .data(partition.value(value).nodes) .transition() .duration(1500) .attrtween("d", arctween) .each("start", function() { d3.select(this) .on("mouseout", null) //clearing listeners .on("mousemove", null) }) .each("end", function() { d3.select(this) .on("mouseout", mouseout) //attaching listeners .on("mousemove", function(d) { div.style("left", d3.event.pagex + 10 + "px"); div.style("top", d3.event.pagey - 25 + "px"); div.style("display", "inline-block"); div.html(d.name + "<br>" + pieobj.formatshrtint(value(d))); }) }); svg.selectall("textpath") .text(function(d) { if (d.name === 'root') { return; } else if ((d.depth === 1) && (d.dx < (d.name.length * 0.15))) { return; } else if ((d.depth === 2) && (d.dx < (d.name.length * 0.1))) { return; } else { return d.name; } }); // following deletes created , recreates text // svg.selectall("#titlex").remove(); }); function mouseout() { div.style("display", "none"); //<< gets rid of tooltip << }; // stash old values transition. function stash(d) { d.x0 = d.x; d.dx0 = d.dx; }; // interpolate arcs in data space. function arctween(a) { var = d3.interpolate({ x: a.x0, dx: a.dx0 }, a); return function(t) { var b = i(t); a.x0 = b.x; a.dx0 = b.dx; return arc(b); }; }; }); }; // // take 2-column csv , transform hierarchical structure suitable // // partition layout. function buildhierarchy(csv) { var root = { "name": "root", "children": [] }; (var = 0; < csv.length; i++) { var sequence = csv[i][0]; // var apd = +csv[i][1]; var salesrev = +csv[i][1]; var amount = +csv[i][2]; if (isnan(salesrev)) { // e.g. if header row continue; } var parts = sequence.split("-"); var currentnode = root; (var j = 0; j < parts.length; j++) { var children = currentnode["children"]; var nodename = parts[j]; var childnode; if (j + 1 < parts.length) { // not yet @ end of sequence; move down tree. var foundchild = false; (var k = 0; k < children.length; k++) { if (children[k]["name"] == nodename) { childnode = children[k]; foundchild = true; break; } } // if don't have child node branch, create it. if (!foundchild) { childnode = { "name": nodename, "children": [] }; children.push(childnode); } currentnode = childnode; } else { // reached end of sequence; create leaf node. childnode = { "name": nodename, // "apd": apd, "salesrev": salesrev, "amount": amount }; children.push(childnode); } } } root.children.foreach(function(v) { v.salesrev = 0; v.amount = 0; v.children.foreach(function(a) { v.salesrev += a.salesrev; v.amount += a.amount; }); }); return root; }
the text not shown because added child of path element. add texts under g tags on same level path elements. 1 way (it adds 1 level of g elements each arc group arc , text together):
var arcs = svg.data([json]).selectall(".arcg") .data(partition.nodes) .enter() .append("g") .attr("class","arcg"); arcs.append("path") .attr("class","thearc") .attr("d", arc) ... arcs.append("text") .attr("transform", function(d) { var c = arc.centroid(d), x = c[0], y = c[1], // pythagorean theorem hypotenuse h = math.sqrt(x * x + y * y); console.log(c, h) return "translate(" + (x / h * labelr) + ',' + (y / h * labelr) + ")"; }) ....
Comments
Post a Comment