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);
Related
I have an axis:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width / 2)
.attr("y", 50)
.style("text-anchor", "center")
.text("pdot [×10<sup>-15</sup> ss<sup>-1</sup>]");
but apparently the label is rendered 'as is'. Changing the last line to
.html("pdot [×10<sup>-15</sup> ss<sup>-1</sup>]");
still does not produce what I want. How to make text tag display processed html? I'm looking for general solution that will allow me to put any html code into the label. However, the best would be the way to use LaTeX. Is it possible? How?
You can use a foreignObject for that, see e.g. http://bl.ocks.org/mbostock/1424037.
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.
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
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.
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.