Develop Reference

How to set symbols in a legend?

I'm newbie in D3 and I'm trying to set a symbol on the left of the text of a legend. The legend is on the right of the graphic and all the texts of the legend are correctly located but I cannot be able to located on their left the symbol which corresponds with the legend.
The function which locate the legend and try to do the same with the symbols are:
setLegend(canvas, symbols, width, offset_right, height) {
canvas
.selectAll("legends")
.data(symbols)
.enter()
.append("text")
.attr("transform", function(d, i) {
let x = width - offset_right + 50;
let y = height / 2 - 100 + i * 24;
return "translate( " + x + "," + y + ")";
})
.attr(
"d",
d3
.symbol()
.type(function(d) {
return d.symbol;
})
.size("75")
)
.style("text-anchor", "left")
.text(d => {
return d.stats;
})
.attr("fill", "#FFFFFF")
.style("font-size", "10pt")
.style("font-weight", "bold"); }
You can check in this screen cap how the legend is correctly located but there are no any symbol on its left.
You can check all the code of the development in codesanbox:
What am I doing wrong?

Right now you're setting an attribute called d to text elements, which has no effect on those texts (only paths have the d attribute). On top of that, you're not appending any path.
A simple and common fix is appending groups in the enter selection, to which you append the paths and texts. Here is an example (I'm setting the x and y positions of the texts so they don't start right over the symbols):
setLegend(canvas, symbols, width, offset_right, height) {
const groups = canvas
.selectAll("legends")
.data(symbols)
.enter()
.append("g")
.attr("transform", function(d, i) {
let x = width - offset_right + 50;
let y = height / 2 - 100 + i * 24;
return "translate( " + x + "," + y + ")";
});
groups.append("path")
.attr("d", d3.symbol().type(function(d) {
return d.symbol;
}).size("75"))
.attr("fill", function(d) {
return d.color;
});
groups.append("text")
.attr("x", 10)
.attr("y", 5)
.style("text-anchor", "left")
.text(d => {
return d.stats;
})
.attr("fill", function(d) {
return d.color;
})
.style("font-size", "10pt")
.style("font-weight", "bold");
}

How to scale text in a D3 bubble chart

I have a working, zoomable D3 bubble chart.
See fiddle here.
var theData = {
children:[{"source":3,"value":2367257,"formattedValue":"€2,367,257","name":"Legacies","tooltip":"Legacies: €2,367,257","colour":"#3182bd","$$hashKey":"object:106"},{"source":4,"value":1199595,"formattedValue":"€1,199,595","name":"Donations including donations in kind","tooltip":"Donations including donations in kind: €1,199,595","colour":"#6baed6","$$hashKey":"object:101"},{"source":2,"value":1154618,"formattedValue":"€1,154,618","name":"Tax relief income","tooltip":"Tax relief income: €1,154,618","colour":"#9ecae1","$$hashKey":"object:110"},{"source":2,"value":81447065,"formattedValue":"€81,447,065","name":"Grants and service fees from government sources","tooltip":"Grants and service fees from government sources: €81,447,065","colour":"#c6dbef","$$hashKey":"object:104"},{"source":3,"value":151798455,"formattedValue":"€151,798,455","name":"Non-government grants and donations","tooltip":"Non-government grants and donations: €151,798,455","colour":"#e6550d","$$hashKey":"object:108"},{"source":4,"value":15039907,"formattedValue":"€15,039,907","name":"Memberships and subscriptions","tooltip":"Memberships and subscriptions: €15,039,907","colour":"#fd8d3c","$$hashKey":"object:107"},{"source":2,"value":278004,"formattedValue":"€278,004","name":"Church collection","tooltip":"Church collection: €278,004","colour":"#fdae6b","$$hashKey":"object:100"},{"source":4,"value":113941393,"formattedValue":"€113,941,393","name":"Unspecified voluntary income","tooltip":"Unspecified voluntary income: €113,941,393","colour":"#fdd0a2","$$hashKey":"object:114"},{"source":1,"value":22890793,"formattedValue":"€22,890,793","name":"Fundraising events and activities","tooltip":"Fundraising events and activities: €22,890,793","colour":"#31a354","$$hashKey":"object:103"},{"source":1,"value":10713266,"formattedValue":"€10,713,266","name":"Charity shop income","tooltip":"Charity shop income: €10,713,266","colour":"#74c476","$$hashKey":"object:99"},{"source":2,"value":3800759,"formattedValue":"€3,800,759","name":"Unspecified activities for generating funds","tooltip":"Unspecified activities for generating funds: €3,800,759","colour":"#a1d99b","$$hashKey":"object:112"},{"source":2,"value":26174523,"formattedValue":"€26,174,523","name":"Investment income (including deposit interest)","tooltip":"Investment income (including deposit interest): €26,174,523","colour":"#c7e9c0","$$hashKey":"object:105"},{"source":3,"value":1605097,"formattedValue":"€1,605,097","name":"Unspecified incoming resources from generated funds","tooltip":"Unspecified incoming resources from generated funds: €1,605,097","colour":"#756bb1","$$hashKey":"object:113"},{"source":1,"value":150535745,"formattedValue":"€150,535,745","name":"Fees and income from trading activities","tooltip":"Fees and income from trading activities: €150,535,745","colour":"#9e9ac8","$$hashKey":"object:102"},{"source":1,"value":14580809,"formattedValue":"€14,580,809","name":"Other activities","tooltip":"Other activities: €14,580,809","colour":"#bcbddc","$$hashKey":"object:109"},{"source":4,"value":147269606,"formattedValue":"€147,269,606","name":"Uncategorized and other income","tooltip":"Uncategorized and other income: €147,269,606","colour":"#dadaeb","$$hashKey":"object:111"}]
};
function randomComparator (a, b) {
return Math.floor(Math.random() * 10) + 1
}
function clipText (d, t) {
if (d.r < 40) {
return "";
}
var name = t.substring(0, d.r / 5);
if (name.length < t.length) {
name = name.substring (0, name.length - Math.min(2, name.length)) + "...";
}
return name;
}
var diameter = 577,
width = 577,
height = diameter,
format = d3.format(",d");
var bubble = d3.layout.pack()
.sort(randomComparator)
.size([width, height])
.padding(3);
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", diameter)
.attr("class", "bubble");
var container = svg.append("g");
var node = container.selectAll(".node")
.data(bubble.nodes(theData)
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) {
return d.name + ": €" + format(d.value);
});
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) {
return d.colour;
//return color(d.source);
})
.style("pointer-events", "all");
var text = node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.style("fill", "#fff");
text.append("tspan")
.attr("x", "0")
.attr("dy", "0")
.style("font-weight", "600")
.text(function(d) {
return clipText(d, d.formattedValue);
});
text.append("tspan")
.attr("x", "0")
.attr("dy", "1.2em")
.text(function(d) {
return clipText(d, d.name);
});
// Setup zooming
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
var zoom = d3.behavior.zoom()
.scaleExtent([-10, 50])
.on("zoom", zoomed);
zoom(svg);
However, not all the bubbles have descriptive text in them, as the text wont fit inside the radius of the bubble; My "algorithm" is pretty blunt; I either don't return any text if the radius is too small or I truncate it.
How do I scale the text so that it shows up when I zoom in?
TIA,
Jeff

Managed to solve it I think. Basically what you wanted to do was when zooming show more and more of the name yes ?
So what I did was when zooming, get the scale and change the font size and the amount of letters that get outputted via your 'cliptext' function depending on the scale value. I also used a general fontsize so the sizing stays consistent.
Updated fiddle : https://jsfiddle.net/24y0qL5e/7/
I changed the cliptext function to get a scale value :
function clipText (d, t, scale) {
if (d.r < fontsize/scale) {
return "";
}
console.log(scale)
var name = t.substring(0, d.r/scale);
if (name.length < t.length) {
name = name.substring (0, name.length - Math.min(2, name.length)) + "...";
}
return name;
}
I added a class for the text that you wish to change just so it's easily selected in future :
text.append("tspan").attr('class', "nodeTextToClip") //added class
.attr("x", "0")
.attr("dy", "1.2em").style("font-size", fontsize)
.text(function(d) {
return clipText(d, d.name,8);
And then changed the size of the text and amount of letters outputted by the cliptext function like so:
d3.selectAll('.node text .nodeTextToClip') //select text that you want to change
.style('font-size', fontsize/scale).text(function(d){return clipText(d, d.name,fontsize/scale/3 );})
This is just a quick try out, obviously there is some simple changes that need to be made, but I think this should help you get an idea of what's needed :)

d3.js bundle layout, moving nodes inklusiv line

I'd like to move a selected node in a bundle layout and redraw the line.
Do you have any suggestions how I could solve that problem?
First I tried to move the node via translate:
node.attr("transform", function (nodeObject) {
var translationValue = nodeObject.y
return "rotate(" + (nodeObject.x - 90) + ")translate(" + (nodeObject.y + 20) + ")";
})
But uf course if I try to move the line that way I won't get anywhere. It will just move the whole line and I can't control the endpoints.
I've tried to remove all lines and redraw them. But the connections will point to the original point not to moved ones.
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.75)
.radius(function (d) {
return d.y;
})
.angle(function (d) {
return d.x / 180 * Math.PI;
});
vis.selectAll("path.link").remove();
vis.selectAll("path.link")
.data(bundle(links))
.enter().append("path")
.each(function (d3Object) {
d3Object.source = d3Object[0], d3Object.target = d3Object[d3Object.length - 1];
})
.attr("d", line);
Thank you very much for your help!

You can manipulate the line attributes and redraw the line.
link.transition()
.attr("d",
function(d, i) {
if (d.target === d3Object || d.source === d3Object) {
line.radius(function (d) {
return d.y - 51;
});
line.angle(function (d) {
return d.x / 180 * Math.PI;
});
} else {
line.radius(function (d) {
return d.y;
});
line.angle(function (d) {
return d.x / 180 * Math.PI;
});
}
return line(splines[i]);
})
.duration(1500);

Zoomable Sunburst with Labels issue

I am using metmajer’s Zoomable Sunburst with Labels:
...with large number of nodes. It appears that the labels are very unclear for small partitions and the chart zooms too slow. Is there any way I can hide the labels if not clear (may be depending on depth) so that my chart is clear and fast as well?

This solution hides the text labels of those partition whose size is less than 1% and displays these labels when zoomed. Not a great solution but better than the congested labels in original chart.
var text = g.append("text")
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return y(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("visibility",function(d) { return d.dx < 0.01? "hidden" : "visible"})
.text(function(d) { return d.name; });
function click(d) {
var total = d.dx;
// fade out all text elements
text.transition().attr("opacity", 0);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition()
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); })
.attr("visibility",function(d) { return d.dx/total < 0.01? "hidden" : "visible"});
}
});
}
Result:

d3 - Rotate x-axis labels

I'm trying this graph:
with my data.
I wanted to rotate the x-axis labels.
Here's the code :
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.enter().append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * gridSize; })
.attr("y", 0)
.style("text-anchor", "end")
.attr("transform", "translate(" + gridSize / 2 + ", -6)rotate(-90)")
.attr("class", function(d, i) { return ((i >= 8 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });
But the result I get is. Entire labels get rotated to -90 deg in a single straight line. Instead I wanted each label to be rotated to -90 deg. Like this:
I even tried using .attr("transform", function(d) {return "translate(" + gridSize / 2 + ", -6)rotate(-90)"}) but it didn't help.
Result :
Help will be very much pleased.

The problem is that when you rotate an element, it gets rotated around the origin point, (0,0), of the local coordinate system. If the element you're rotating isn't right next to the origin, it can end up moved quite a large distance, and possibly moved outside the chart altogether.
There are two ways you can fix it:
Position the label with a "transform" attribute instead of with x and y attributes. That way, the label's coordinate system -- including the (0,0) point of rotation -- will be positioned with it, and the rotation will happen where you expect. The code #Manoj gave follows that system, but assumes you are using the default xAxis function. For your custom axis label code, your labels are given a y value of 0, and an x value determined from a function. You just need to move those values into the transform attribute, paying careful attention that the transformation of the overall position comes before the rotation and adjustment:
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.enter().append("text")
.text(function(d) { return d; })
.attr("transform", function(d, i) {
return "translate(" + ( i * gridSize) + ",0)"
+ "translate(" + gridSize / 2 + ", -6)rotate(-90)";
} )
.style("text-anchor", "end")
.attr("class", function(d, i) { return ((i >= 8 && i <= 16) ?
"timeLabel mono axis axis-worktime" :
"timeLabel mono axis");
});
Of course, you could combine those two translation statements, as:
.attr("transform", function(d, i) {
return "translate(" + ( (i + 0.5) * gridSize) + ",-6)"
+ "rotate(-90)")
Alternately, you can specify a center of rotation in the rotate statement, by including the x and y values of the point you want it to rotate around:
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.enter().append("text")
.text(function(d) { return d; })
.attr("x", function(d, i) { return i * gridSize; })
.attr("y", 0)
.attr("transform", function(d, i) {
return "translate(" + gridSize / 2 + ", -6)" +
"rotate(-90 "+ ((i + 0.5) * gridSize) + " " + (-6) +")";
} )
.style("text-anchor", "end")
.attr("class", function(d, i) { return ((i >= 8 && i <= 16) ?
"timeLabel mono axis axis-worktime" :
"timeLabel mono axis");
});
As you can see, this version is rather repetitive, as we have to calculate the position of the label twice -- once to position it, and once to set the center of rotation. You can see why most examples (and the d3 axis functions) position the labels with translations, so they can just be rotated in place.

Try this code:
Fiddle:
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("id", "x")
.attr("transform", "translate(0," + (h) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-90)";
});