d3 x-axis label positioned below the x-axis - javascript

I'm trying to draw an x-axis label for one of my d3 graphs, and I'm having a lot of trouble positioning it below the axis itself. Here is my current code:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", (width / 2))
.style("text-anchor", "middle")
.text("Users ordered by contribution");
And here is a screenshot of the problem. Is there a quick fix?

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", (width / 2))
.attr("y", height) //set your y attribute here
.style("text-anchor", "middle")
.text("Users ordered by contribution");
You can set your y position attribute for your svg text as per above

Related

X Axis text labels are not rotating in d3

I am working with a D3 stack bar chart.
The fiddle is here
When I am clicking on the Month button, the chart appears with a messy x axis label
I want to rotate the x-axis label's conditionally in case of a good amount of data (In the fiddle, for months data)
My first step is to rotate the label. I am appending the below part.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
I am not sure, why it is not working. Whats the problem here?
There's nothing wrong with your code - see below:
var margin = {top: 25, right: 25, bottom: 25, left: 25}
var width = 600 - margin.left - margin.right;
var height = 200 - margin.top - margin.bottom;
// x domain
var x = d3.timeDays(new Date(2020, 00, 01), new Date(2025, 11, 01));
// x scale
var xScale = d3.scaleTime()
.domain(d3.extent(x))
.range([0, width]);
// svg
var svg = d3.select("#scale")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// messy x-axis
svg.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,${height - 50})`)
.call(d3.axisBottom(xScale)
.ticks(d3.timeMonth)
);
// x-axis with rotated labels
svg.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,0)`)
.call(d3.axisBottom(xScale)
.ticks(d3.timeMonth)
)
.selectAll("text") // YOUR CODE
.style("text-anchor", "end") // YOUR CODE
.attr("dx", "-.8em") // YOUR CODE
.attr("dy", ".15em") // YOUR CODE
.attr("transform", "rotate(-65)" ); // YOUR CODE
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js"></script>
<div id="scale"></div>
What you need to adjust in the fiddle is to apply the rotation on the axis labels within the draw function. So from this:
svg.selectAll("g.x.axis")
.transition(t).call(xAxis);
To this:
svg.selectAll("g.x.axis")
.transition(t).call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)" );
The axis is getting re-rendered depending on which button is clicked, and it isn't preserving the setting in the initial creation of the svg and two axis gs.
This answer might be useful.

Rotate x axis text and append label text d3 v4

I want to append x-axis text label and rotate the x axis labels.
Both works individually but I cant figure out how to use them both together.Can someone please help.
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text") // either this
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".1em")
.attr("transform", "rotate(-65)")
.append("text")// or this
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.style("font-weight", "bold")
.style("fill", "black")
.text(tooltipTxt);

Trouble adding label to axes in d3

I have this code and I can't seem to create labels for the axes. I've tried copying what other scripts do but my knowledge of D3 is pretty lacking.
In particulare I was trying to merge this code with what I have to disasterous results:
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
And what I have:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("transform", "translate(" + width + ",0)")
.attr("y", -5)
.style("text-anchor", "end")
.text("Frequency");
Here is the bl.ocks.org link
And here is the gist
Your label is here in the DOM at the position you specified. You just need to style it to make it visible:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("fill", "black") // <= Here
.attr("transform", "translate(" + width + ",0)")
.attr("y", -5)
.style("text-anchor", "end")
.text("Frequency");
Or simply use CSS:
.label {
fill: black;
}

Unable to update the chart using d3 chart

I have created one drop down(Account_type) in that drop down the value coming from database.
ie:value1,value 2,value3...
on the basis of selecting value i want to update my chart .But in my current scenario it will be creating a another chart instead of updating same..Again Again it will creating separate chart
My code here
var svg = d3.select("#"+this.htmlObject).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -75)
.attr("dy", ".71em")
.attr("dx","-18em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });
Could you please tell me How i can achieved this.
Remove previous svg element and create new svg element for other value.

Why does my saved D3 selection have no effect in some cases?

I'm confused about how to save a D3 selection for later use. In the code below, I have a "global" variable for my axes, to which I save them when they are first created. Later, I'm able to use this variable for certain things (here, setting some text) but not others (here, updating the scale), which only work if I explicitly (re)select the axes.
Is there perhaps something about JavaScript variable scoping or lifetime that I don't understand? Any assistance is appreciated!
The relevant code, much condensed from the full context:
// Top level of page
var gxaxis, gyaxis;
var updatePlot = function (view, first) {
d3.csv("data.csv", function (error, data) {
data.forEach(function (d) {
...
});
var x, y;
x = d3.scale.linear().range(...);
y = d3.scale.linear().range(...);
x.domain(d3.extent(data, function (d) {...})).nice();
y.domain(d3.extent(data, function (d) {...})).nice();
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
// The variable 'first' is true on page load, so this code the if clause will be executed before any executions of the else clause
if (first) {
gxaxis = svg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end");
gyaxis = svg.append("g").attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");
} else {
// Why is it necessary to explicitly select; why can't I use my gxaxis variable (as I do below for the text)?
svg.select(".x.axis")
.transition().duration(0).ease("in")
.call(xAxis);
// Using gyaxis.transition()... has NO EFFECT
svg.select(".y.axis")
.transition().duration(0).ease("in")
.call(yAxis);
}
var xLabel = ...;
var yLabel = ...;
// This use of gxaxis works.
gxaxis.text(xLabel);
gyaxis.text(yLabel);
});
};
// Set up handlers for switching among views
d3.selectAll(".view-select").on("click", function () {
d3.event.preventDefault();
updatePlot(this.id, false);
});
updatePlot('a', true);
This code:
gxaxis = svg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end");
Creates this DOM:
<svg>
<...>
<g class="x axis">
<g class="tick">
<line ...>
<text ...>
</g>
</g>
</...>
</svg>
And saves the text to the selection, because it was appended last.
If you want the axis, save the axis to the selection before you edit the text.
gxaxis = svg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
gxaxis.selectAll("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end");

Categories

Resources