I did a graph where my x-axis is out of the range in svg element.
I am using object structure ProgressGraph to save my options (because of another things...)
I would like to set x-axis to fixed size 720x450, but when I call zoom or I want to translate graph to right / left , the X-axis is going out of the svg element. The x-axis size width is changing from 720 to 920.53 and I do not know why. This width should be fixed to 720px.
Screenshots:
Good One good one before zoom / move to side
Bad One bad one after zoom / move to side
graphParams : {
//whole size
width : 1050,
height : 600,
//svg -g
svg_width: 720,
svg_height : 450
}
x = d3.time.scale().domain(ProgressGraph.xAxisDomain).range([0,graphParams.svg_width]);
xAxis =
d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(-graphParams.svg_height)
.tickPadding(12)
.ticks(12);
yAxis =
d3.svg.axis()
.scale(y)
.orient("left")
.tickSize(-graphParams.svg_width);
zoom =
d3.behavior.zoom()
.x(x)
.scaleExtent([1, 32])
.on("zoom", zoomed);
var svg = d3.select("#projectProgress-graph-div").append("svg")
.attr("width", graphParams.width)
.attr("height", graphParams.height)
.append("g")
.attr("id", "projectProgress-graph-svg")
.attr("transform", "translate(" + (graphMargin.left) + "," + graphMargin.top + ")")
.call(zoom);
svg.append("rect")
.attr("width", graphParams.svg_width )
.attr("height", graphParams.svg_height);
svg.append("g")
.attr("class", "x axis")
.attr("width", graphParams..svg_width)
.attr("transform", "translate(0, " + graphParams.svg_height + ")")
.call(xAxis)
.selectAll("text")
.attr("dx", "-2em")
.attr("dy", ".0em")
.attr("transform", "rotate(-65)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
function zoomed() {
svg.select(".x.axis").call(xAxis)
.selectAll("text")
.attr("dx", "-2em")
.attr("dy", "0em")
.attr("transform", "rotate(-65)" );
}
Sollution is add a svg element befero we add "g element" for x axis
svg.append("svg")
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0 , " + graphParams.svg_height + ")")
.call(xAxis)
.selectAll("text")
.attr("dx", "-2em")
.attr("dy", ".0em")
.attr("transform", "rotate(-65)" );
Related
I am trying to do zoom on axis in scatter plot chart,this is what I have tried
var zoom = d3.zoom()
.scaleExtent([1, 5])
.extent([100, 100], [width - 100, height - 100])
.on("zoom", zoomed);
var gX;
var gY;
xScale = d3.scaleLinear().range([0, width])
yScale = d3.scaleLinear().range([height, 0])
function zoomed() {
svg.selectAll(".charts")
.attr("transform", d3.event.transform);
d3.selectAll('.dot').style("stroke-width", 2 / d3.event.transform.k);
gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
}
and I appended gX and gY like below
gX = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
gY = svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis)
When I do zoom on circle width is getting zoomed not axis, I am guessing something i am doing wrong on gX.call & gY.call which I couldn't figure. Any suggestions??
I did something like this....
Call zoom on select like this
var svg = d3.select("div#ScatterPlot svg").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 + ")")
.call(d3.zoom().on("zoom", zoom));
var gX = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
var gY = svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var circles = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")....
function zoom() {
gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
var new_XScale = d3.event.transform.rescaleX(xScale);
var new_yScale = d3.event.transform.rescaleY(yScale);
circles.attr("cx", function (d) { return new_XScale(d.xAxisValue) });
circles.attr("cy", function (d) { return new_yScale(d.yAxisValue) });
}
I have a d3 graph in which the x axis ticks are like this:
The code segment for doing that is the following
vis.append("svg:g")
.attr("class", "x axis")
.style({ 'stroke': 'Black', 'fill': 'none', 'stroke-width': '1px' })
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", "0.35em")
.attr("transform", "rotate(120)")
.style("text-anchor", "start");
The thing is that labels are not readable. For example, "August" should start with "A", not with "t" like in the image I've attached.
I tried changing "rotate" value, even it did not help.
Can someone help me to position the labels correctly ?
Instead of rotating 120, try to rotate -40 (changing the text-anchor to end).
Here is the demo:
var svg = d3.select("svg")
var scale = d3.scaleBand()
.range([20, 280])
.domain(["foo", "bar", "baz"]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
.attr("transform", "translate(0,50)")
.call(axis)
.selectAll("text")
.attr("transform", "translate(-10,0) rotate(-40)")
.style("text-anchor", "end");
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
I have a big problem.
I use d3 to visualize my (poll)data. (So Questions and answers) It works fine except one problem.
Sometimes it doesn't visualize the data like they are. For example one time d3 get all right data about d3.json. But the graph is not right. It should load 300 answers in the first bars but it just show 50. I tested it and the json works.
I tried to filter the graph and I got the same problem.
This is my d3 code.
<div>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 430
},
width = 1400 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var yScale = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "chart");
var chart = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("getdata.php", function(error, data) {
xScale.domain(data.map(function(d) {
return d.text;
}));
yScale.domain([0, d3.max(data, function(d) {
return d.count;
})]);
chart.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return xScale(d.text);
})
.attr("y", function(d) {
return yScale(d.count);
})
.attr("height", function(d) {
return height - yScale(d.count);
})
.attr("width", xScale.rangeBand())
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.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("Antworten");
});
function type(d) {
d.count = +d.text;
return d;
}
</script>
</div>
I guess the problem starts here. But I don't know why. The problem doesn't appear at every question. Only at a few or when I try to use my filter.
Maybe it happens when two values have a big difference?
Update:
It is like: D3 doesn't want to lose the smallest bar. So other bars must based on that smallest. And then the values are not correct for the bigger bars. Maybe the Y scale depends on the smallest bar.
I looking any chart library which has configuration for custom y-axis values. I want to customize the y-axis like ( 0 to 3). I seen D3 and other chart libraries, the Y-axis automatically generates the values. I my design there is only one filed and on one for compare on the x-axis.
Which chart library is most suited for this condition to make this happen. If any example already on google, please share...
If you are looking for a D3 solution then you can refer my fiddle below:
http://jsfiddle.net/cyril123/7ftuumv4/2/
code:
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//specify data here
data = [{letter: "1", value: 1.3}]
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
;
var svg = d3.select("body").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 + ")");
//as you have a fixed x axis value and single data
x.domain([data[0].letter]);
//as you have a fixed range for y axis
y.domain([0, 3]);
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", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
//make the bar chart
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.value); })
.attr("height", function(d) { return height - y(d.value); });
I'm trying out d3js and I have a problem with getting my first basic column(vertical bar) chart work. The only thing I find a bit difficult to understand is the scaling thing. I want to make the x and y axis ticks with labels but I have the following problems:
First of all here is my data:
{
"regions":
["Federal","Tigray","Afar","Amhara","Oromia","Gambella","Addis Ababa","Dire Dawa","Harar","Benishangul-Gumuz","Somali","SNNPR "],
"institutions":
[0,0,34,421,738,0,218,22,22,109,0,456]
}
On the y-axis the values are there but the order is reversed. Here is the code:
var y = d3.scale.linear().domain([0, d3.max(data.institutions)]).range([0, height]);
then I use this scale to create a y-axis:
var yAxis = d3.svg.axis().scale(y).orient("left");
and add this axis to the svg element
svgContainer.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("Institutions");
the problem here is that the y-axis start from 0 at the top and with 700 at the bottom which is OK but it should be in reverse order.
The other problem I have it the x-axis. I want to have an ordinal scale since the values I want to put are in the regions names I have above. So here's what I've done.
var x = d3.scale.ordinal()
.domain(data.regions.map(function(d) { return d.substring(0, 2); }))
.rangeRoundBands([0, width], .1);
then the axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
and finally add it to the svg element
svgContainer.append("g")
.attr("class", "x axis")
.attr("transform", "translate( 0," + height + ")")
.call(xAxis);
Here the problem is the ticks as well as the labels appear but they are not spaced out evenly and do not correspond with the center of the rectangles I'm drawing. Here is the complete code so you can see what's happening.
$(document).ready(function(){
d3.json("institutions.json", draw);
});
function draw(data){
var margin = {"top": 10, "right": 10, "bottom": 30, "left": 50}, width = 700, height = 300;
var x = d3.scale.ordinal()
.domain(data.regions.map(function(d) { return d.substring(0, 2); }))
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.domain([0, d3.max(data.institutions)])
.range([0, height]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svgContainer = d3.select("div.container").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" +margin.left+ "," +margin.right+ ")");
svgContainer.append("g")
.attr("class", "x axis")
.attr("transform", "translate( 0," + height + ")")
.call(xAxis);
svgContainer.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("Institutions");
svgContainer.selectAll(".bar")
.data(data.institutions)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d, i) {return i* 41;})
.attr("y", function(d){return height - y(d);})
.attr("width", x.rangeBand())
.attr("height", function(d){return y(d);});
}
I put the code to Fiddle: http://jsfiddle.net/GmhCr/4/
Feel free to edit it! I already fixed both problems.
To fix the upside-down y-axis just swap the values of the range function arguments:
var y = d3.scale.linear().domain([0, d3.max(data.institutions)]).range([height, 0]);
Do not forget to adjust the code for the bars if you change the scale!
The source of the mismatch between bars and the x-axis can be found here:
var x = d3.scale.ordinal()
.domain(data.regions.map(function(d) {
return d.substring(0, 2);}))
.rangeRoundBands([0, width], .1);
svgContainer.selectAll(".bar")
.data(data.institutions)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d, i) {return i* 41;})
.attr("y", function(d){return height - y(d);})
.attr("width", x.rangeBand())
.attr("height", function(d){return y(d);});
You specify the padding for rangeRoundBands at 0.1 but you ignore the padding when computing the x and width values for the bars. This for example is correct with a padding of 0:
var x = d3.scale.ordinal()
.domain(data.regions.map(function(d) {
return d.substring(0, 2);}))
.rangeRoundBands([0, width], 0);
svgContainer.selectAll(".bar").data(data.institutions).enter().append("rect")
.attr("class", "bar")
.attr("x", function(d, i) {
return i * x.rangeBand();
})
.attr("y", function(d) {
return y(d);
})
.attr("width", function(){
return x.rangeBand();
})
.attr("height", function(d) {
return height -y(d);
});
The padding determines how much of the domain is reserved for padding. When using a width of 700 and a padding of 0.1 exactly 70 pixels are used for padding. This means you have to add 70 / data["regions"].length pixels to every bar's x value to make this work with a padding.