Adding rules to charts that use d3.svg.axis - javascript

I'm using a line chart that's essentially a copy of the code at http://bl.ocks.org/3883245. I would like to add horizontal rules to the graph, however when I try to access the calculated tick values via yAxis.tickValues() I only get a null response. Am I going about that correctly?

tickValues is used to set custom, externally determined tick positions. So if you let the axis choose the values then this property will properly be null.
The easiest way to add grid lines is actually to add another axis! In the example you linked immediately following the lines:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
you can add the following to append a grid:
svg.append("g").attr("class", "xaxisgrid").call( xAxis.tickFormat("").tickSize(450) );
svg.select("g.xaxisgrid").selectAll(".tick")
.style('stroke', "#000")
.style('opacity', 0.4)
.filter(function(d, i){ return d3.select(this).classed('minor');} )
.style('opacity', 0.1);
svg.select("g.xaxisgrid .domain").style('fill', 'none');
The code is a bit rough, but should get you started. Basically I am slightly modifying the axis generation function(xAxis) to generate only ticks, and then I am making the ticks really long.

Related

d3.js x axis length too short

Here is my script:
<script type="text/javascript">
Is there a way to extend the x axis a little bit so it touches the y axis?
I tried playing around with certain values but it would change something in the rest of the chart, which I do not want.
I think you already forced it to translate 20 pixels in X on this part of your code:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(20," + height + ")") /* <-- here! make it 0 , height */
.call(xAxis);

Adding text to the center of a D3 Donut Graph

Fiddle
I am trying to insert basically a label to the center of a donut graph using D3. I was able to work with an existing code I found and manipulate it so all the slices of the graph mesh in the middle to appear like there is a label there, but I think it'd be a better idea just to figure out how to make it a more permanent home in the center. I am very new to JS and D3.
Any help is grealty appreciated.
Thank you
This is currently the code that is falsifying a label being in the center.
svg.selectAll("text").data(pie(data)).enter()
.append("text")
.attr("class","label1")
.attr("transform", function(d) {
var dist=radius-120;
var winkel=(d.startAngle+d.endAngle)/2;
var x=dist*Math.sin(winkel)-4;
var y=-dist*Math.cos(winkel)-4;
return "translate(" + x + "," + y + ")";
})
You can simplify your code quite a bit. Since you are already centering the pie chart:
var svg = d3.select("#svgContent").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate("+width/2+","+height/2+")");
You can just add the text as follows:
svg.append("text")
.attr("text-anchor", "middle")
.text("$" + totalValue);
Note that since you are only adding one <text>, you don't need to bind any data to it, and can pass .text(...) a value directly instead of a function.

D3.js: Align X-Axis to specific value on Y-Axis (e.g. the origin)

I want something a simple as this:
http://alex.nt.fh-koeln.de/Bilder/wlet1.jpg
The Axis are aligned to the origin. However, I could only figure out how to adjust the axis in terms of the width/height using transform:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height/2 + ")")
.call(xAxis);
This will put the X-axis in the middle of the graph, which is not necessarily the origin. I guess there is a simple solution, but I just can't seem to find it.

How to assign random colors to D3 bar chart?

I am working on a D3 bar chart as per the mock-up below:
How do I make the bars to have random colors?
jsFiddle
Code:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
d3 has 4 built in color palettes.
Here's the link for the built in color palettes.
This tutorial is good on using specific colors for specific element.
Another tutorial by Jerome Cukier.
And the official site for d3 colors.
Fiddle - Note: In the fiddle I've passed the colors by adding colors in the data.
It can even be done by passing the colors from a different variables.
Hope this helps.
colors = d3.scale.category20()
rects = svg.selectAll('rect')
.data(data)
.enter()
.append("rect")
.attr("class","rect")
.....#other attributes
.attr("fill",function(d,i){return colors(i)})
this is old now, but this is a pretty good approach if you need N number of random colors
http://bl.ocks.org/jdarling/06019d16cb5fd6795edf

Why does d3 axis class name change axis format?

Here's a D3? .js? puzzler I ran into over the weekend. I have a y-axis that is changing format according to the class name that is used when i set the y axis attribute on a group that I append to the the svg object. Details that might affect it are as follows:
creating the y axis object:
var y = d3.scale.ordinal()
.domain(d3.range(ydomain.length))
.rangeRoundBands([2, height],0.08);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues(ydomain);
Attaching the y axis:
svg.append("g")
.attr("class", "**y-axis**")
.call(yAxis)
.append("text")
.attr("y", -17)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.style("font-size", "16px")
.attr("transform", "translate(5,0), rotate(0)")
.text("Keywords")
;
The bold "y-axis" is the part that triggers the funny behavior. If I name it as: "y axis", I get this:
BUT if I use "y-axis" as above, the formatting changes to this:
The bolded line appears rather than the axis with small tick marks. Both versions of class name "y axis","y-axis" seem to be valid, both call the yAxis object, and this is the first time in the code that these class names are used. So what's the fundamental cause of this behavior? I think there's some web dev 101 stuff I'm not getting so simple and basic explanations are much appreciated.
"y axis" is a class with associated styling that gives you the thin line with the tickmarks. "y-axis" has no such styling and is drawing your y-axis line according to some other styling property not intended for axis styling.

Categories