I want to write a function, that returns a tick label with two lines of text. As I can see, an svg text tag is used for text labels. Is there a way to add tspan there or something?
You can access the elements created by the axis: Demo
d3.select('svg')
.append('g')
.attr('transform', 'translate(180, 10)')
.call(xAxis)
.selectAll('text') // `text` has already been created
.selectAll('tspan')
.data(function (d) { return bytesToString(d); }) // Returns two vals
.enter()
.append('tspan')
.attr('x', 0)
.attr('dx', '-1em')
.attr('dy', function (d, i) { return (2 * i - 1) + 'em'; })
.text(String);
Also, you'll have to set .tickFormat to '' on the axis.
Related
I have a horizontal bar chart that gets updated when one of the radio buttons clicked. The bars get updated fine, however, the old labels seem not to be removed every time the labels get updated. Am I missing something here? it seems that the exit function is not working. I couldn't find examples that deal with labels.
svg_bar.selectAll(".text-bar")
.data(dataSet)
.join(
enter => enter
.append("text")
.attr('text-anchor', 'middle')
.attr('font-size', '16px')
.attr('font-family', 'sans-serif')
.attr('fill', 'white')
.call(enter => enter.transition()
.duration(1000)
.attr('y', (d) => yScale_h(d.clean_test) + yScale_h.bandwidth() / 2)
.attr('x', (d) => xScale_h(d.Award) - 14)
.text(function (d) {
return `${d.Award} `;
})
),
update => update
.call(update => update.transition()
.duration(1000)
.text(function (d) {
return `${d.Award} `;
})
.attr('y', (d) => yScale_h(d.clean_test) + yScale_h.bandwidth() / 2)
.attr('x', (d) => xScale_h(d.Award) - 14)
),
exit => exit
.call(exit => exit.transition()
.duration(1000)
.remove()
)
);
If you use svg_bar.selectAll(".text-bar"), the selection is always empty and d3 will always add new elements.
If you use svg_bar.selectAll("text"), the selection will include all text elements of the svg, and it will change other text elements such as the y-axis and title.
One approach to select only the texts of the bars is to select with a class, such as svg_bar.selectAll("text.bar"). For this to work, the appended bars need to be assigned to the 'bar' class with .classed('bar', true), so they selected in the next render.
svg_bar.selectAll("text.bar") // Selects the texts of class "bar"
.data(dataSet)
.join(
enter => enter
.append("text")
.classed("bar", true) // Create texts with class "bar"
.attr('text-anchor', 'middle')
...
2 part question:
I have a bar chart with created using multiple arrays. These arrays contain the % wins of baseball teams; the relevant team colours; and their names.
I can create one set of labels on the chart, either the names or the win %. However I can't get both on at the same time. See below.
The code I am using is:
let WinsLabel = svgContainer.selectAll("text")
.data(d3.zip(TeamArray, WinPercArray, Colours));
WinsLabel.enter()
.append("text")
.attr("fill", "black")
.attr("x", function(d, i) {
return 45 + (i * 50);
})
.attr("y", 700)
.transition()
.duration(1000)
.attr("x", function(d,i){
return 70 + (i*50);
})
.attr("y", function(d){
return 685 - d[1];
})
.attr("text-anchor","middle")
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.attr("fill", "black")
.text(function(d){
return d[1]/10 + "%";
});
let TeamLabel = svgContainer.selectAll("text")
.data(d3.zip(TeamArray, WinPercArray, Colours));
TeamLabel.enter()
.append("text")
.attr("fill", "black")
.attr("x", function(d, i) {
return 45 + (i * 50);
})
.attr("y", 700)
.transition()
.duration(1000)
.attr("x", function(d,i){
return 70 + (i*50);
})
.attr("y", function(d){
return 700 - d[1]/2;
})
.attr("text-anchor","middle")
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.attr("fill", "white")
.text(function(d){
return d[0];
});
When I run the code with both scripts, only the win % shows up, but the names don't. In order to get the names to show up I have to remove the first label.
The 2 parts to my question are:
How would I get both sets of labels to show up at the same time?
How can I get the names to be arranged vertically in the rectangles/bars?
D3 stands for data driven something; and it's core principle is based on linking elements / selection, with data. When you set data, (var selection = selectAll(...).data(...)), you get 3 cases to think about:
Some existing elements can be linked to certain item in new data. You access them using selection
Some elements cannot be linked to any item in new data. You access them using selection.exit()
Some items in new data cannot be linked to any element from selection. You access them by using selection.enter()
In its simplest case, the linking between data and elements is made by index -- ie first element in selection is linked with first item in data array, second with second, and so on. The d3 cannot find element for the data item (= gets put into .enter() selection) if and only if (in this by-index context) the index of that data item is bigger than the size of the selection.
On your initial select
let WinsLabel = svgContainer.selectAll("text")
.data(d3.zip(TeamArray, WinPercArray, Colours));
The selection is empty, since there are no text tags yet. And since its empty, all of the to-be-created placeholders are inside .enter() selection. However, on your next select for the other label type
let TeamLabel = svgContainer.selectAll("text")
.data(d3.zip(TeamArray, WinPercArray, Colours));
The selection is of the size of the passed data, and thus .enter() selection is empty; it's the TeamLabel selection that contains all of the old elements (percentage label text tags), but they got their data values reassigned.
Andrew proposed one solution to assign classes, but personally I'd take all elements that relate to same team and put it under one group.
var TeamArray = ["Yankees", "Rays", "RedSox", "Jays","Orioles", "Twin", "Indians", "WhiteSox", "Detroit", "Royals", "Astros", "Rangers", "A's", "Angels","Mariners"];
var WinPercArray = [653, 609, 540, 400, 300, 667, 521, 458, 383, 347, 660, 511, 500, 458, 442];
var Colours = ["#003087", "#092C5C", "#BD3039", "#134A8E", "#DF4601", "#002B5C", "#0C2340", "#C4CED4", "#FA4616", "#BD9B60", "#EB6E1F", "#C0111F", "#003831", "#003263", "#005C5C"];
var data = d3.zip(TeamArray, WinPercArray, Colours);
var svg = d3.select('body').append('svg').attr('height', 300).attr('width', 800);
var teams = svg.selectAll('g.teams')
.data(data);
var scale = d3.scaleLinear()
.domain([0, 1000])
.range([200, 0]);
var teamsEnter = teams.enter()
.append('g')
.classed('team', true)
.attr('transform', function(d, i){
return 'translate(' + (i*50) + ',0)';
})
teamsEnter.append('rect')
.attr('width', 50)
.attr('y', function(d) { return scale(d[1]); })
.attr('height', function(d) { return scale(0) - scale(d[1]); })
.style('fill', function(d) { return d[2]; });
teamsEnter.append('text')
.attr('x', 25)
.attr('y', function(d) { return scale(d[1]) - 30; })
.text(function(d){ return d[0]; });
teamsEnter.append('text')
.attr('x', 25)
.attr('y', function(d) { return scale(d[1]) - 15; })
.text(function(d){ return d[1]; });
text {
text-anchor: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Groups in some way act as encapsulation of inner items, so you can mentally separate data binding to groups (ie when to create / update / delete it), from actual logic that takes place when working with its children
I have this piece of code in which circles are drawn, I need to put a text inside each circle, I would also like to know how I can put a certain size to each of the elements of the circle.
Thank you very much.
svg = d3.select(selector)
.append('svg')
.attr('width', width)
.attr('height', height);
// Bind nodes data to what will become DOM elements to represent them.
bubbles = svg.selectAll('.bubble')
.data(nodes, function (d) { return d.id; });
// Create new circle elements each with class `bubble`.
// There will be one circle.bubble for each object in the nodes array.
// Initially, their radius (r attribute) will be 0.
bubbles.enter().append('circle')
.classed('bubble', true)
.attr('r', 0)
.attr('fill', function (d) { return fillColor(d.group); })
.attr('stroke', function (d) { return d3.rgb(fillColor(d.group)).darker(); })
.attr('stroke-width', 2)
.on('mouseover', showDetail)
.on('mouseout', hideDetail);
// Fancy transition to make bubbles appear, ending with the
// correct radius
bubbles.transition()
.duration(2000)
.attr('r', function (d) { return d.radius; });
A good practice would be to create a group element for each bubble because they will be composed of two elements - a circle and text.
// Bind nodes data to what will become DOM elements to represent them.
bubbles = svg.selectAll('.bubble')
.data(nodes, function(d) {
return d.id;
})
.enter()
.append('g')
.attr("transform", d => `translate(${d.x}, ${d.y})`)
.classed('bubble', true)
.on('mouseover', showDetail)
.on('mouseout', hideDetail)
After that, circles and texts can be appended:
circles = bubbles.append('circle')
.attr('r', 0)
.attr('stroke-width', 2)
texts = bubbles.append('text')
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle')
.style('font-size', d => d.radius * 0.4 + 'px')
.attr('fill-opacity', 0)
.attr('fill', 'white')
.text(d => d.text)
// Fancy transition to make bubbles appear, ending with the
// correct radius
circles.transition()
.duration(2000)
.attr('r', function(d) {
return d.radius;
});
For hiding/showing text, you can use fill-opacity attribute and set it 0 when the text should be hidden, and 1 if it should be shown:
function showDetail(d, i) {
d3.select(this.childNodes[1]).attr('fill-opacity', 1)
}
function hideDetail(d, i) {
d3.select(this.childNodes[1]).attr('fill-opacity', 0)
}
example: https://jsfiddle.net/r880wm24/
I am working on a d3.js project where I am displaying a number of rectangles to be the same height. The rectangles are connected to a input[type=number] that adjust the height of each group of rectangles. To make animation easier (so I only have to manipulate the svg:defs onchange of the number input), I would like to be able to specify the height of a group of rectangles with a svg:def tag like this:
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
svg.append("defs").selectAll(".rectdef")
.data(data).enter()
.append("rect")
.attr("class", "rectdef")
.attr("id", function (d, i){return "rect" + d.name;})
.attr("x", 0) // overridden below
.attr("width", 0) // overridden below
.attr("y", 0) // overridden below
.attr("height", function (d, i){return d.height});
and then to be able to just refine placement x, y and width of the rectangles with something like this:
svg.selectAll(".bar")
.data(data).enter()
.append("use")
.attr("class", "bar")
.attr("xlink:href",function (d){return "#rect"+d.type;})
.attr("x", function(d) { return d.x })
.attr("width", function (d) {return d.w;}) // this does NOT adjust width!
.attr("y", function (d) {return 0;});
This snippet correctly changes the x and y coordinates but it does not properly change the width! Any ideas what's wrong here? Is this a browser issue (I'm using Chrome 24.0.1312.52)? Is width not editable like this on an svg:use tag?
There aren't any problems with the data (I've checked that) and I have been able to confirm that the animation does work correctly.
If you point a <use> element at a <rect> the width/height of the <use> are ignored according to the SVG specification
I recomment you put the <rect> in a <symbol>, and then have the use reference the symbol. That way the width/height of the use will apply to the rect. You probably want to make the rect's width/height 100% within the symbol.
In other words, something like this should work:
svg.append("defs").selectAll(".rectdef")
.data(data).enter()
.append("symbol")
.attr("class", "rectdef")
.attr("id", function (d, i){return "rect" + d.name;})
.append("rect")
.attr("x", 0) // overridden below
.attr("width", "100%") // overridden below
.attr("y", 0) // overridden below
.attr("height", function (d, i){return d.height});
svg.selectAll(".bar")
.data(data).enter()
.append("use")
.attr("class", "bar")
.attr("xlink:href",function (d){return "#rect"+d.type;})
.attr("x", function(d) { return d.x })
.attr("width", function (d) {return d.w;}) // this correctly adjusts width!
.attr("y", function (d) {return 0;});
I'm new to d3.js (and stackoverflow) and I'm currently working through the parallel coordinates example. I'm currently using a 2d array named 'row' for the data. Above each vertical axis is the label '0' or '1' or '2', etc. However, I'd like each vertical axis to be labeled with the text in row[0][i]. I believe the numbers 0,1,2 are coming from the datum. Any suggestions on how I may use the labels in row[0][i] instead? I suspect I'm doing something wrong that's pretty basic. Here's the relevant code. Thanks !
// Extract the list of expressions and create a scale for each.
x.domain(dimensions = d3.keys(row[0]).filter(function (d, i) {
return row[0][i] != "name" &&
(y[d] = d3.scale.linear()
.domain(d3.extent(row, function (p) { return +p[d]; }))
.range([height, 0]));
}));
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function (d) { return "translate(" + x(d) + ")"; });
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function (d) { d3.select(this).call(axis.scale(y[d])); })
.append("text")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(String);//.text(String)
If you only have a controlled set of Axis (like three axis), you may just want to set them up, individually, as follows...
svg.append("text").attr("class","First_Axis")
.text("0")
.attr("x", first_x_coordinate)
.attr("y", constant_y_coordinate)
.attr("text-anchor","middle");
svg.append("text").attr("class","Second_Axis")
.text("1")
.attr("x", first_x_coordinate + controlled_offset)
.attr("y", constant_y_coordinate)
.attr("text-anchor","middle");
svg.append("text").attr("class","Third_Axis")
.text("2")
.attr("x", first_x_coordinate + controlled_offset*2)
.attr("y", constant_y_coordinate)
.attr("text-anchor","middle");
However, if you have dynamically placed axis that rely on the data, you may want to place the axis info using a function that holds the y coordinate constant while determining the x coordinate based on a fixed "offset" (i.e. data driven axis placement). For example...
svg.append("text")
.attr("class",function(d, i) {return "Axis_" + i; })
.text(function(d,i) {return i; })
.attr("x", function(d, i) { return (x_root_coordinate + x_offset_value*i); })
.attr("y", constant_y_coordinate)
.attr("text-anchor","middle");
I hope this helps.
Frank