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.
Related
I am trying to implement a force layout on D3 v4 with a large no. of nodes with labels. The problem is that the labels overlap and affects the readability. I found this example which is on v3 and implements something similar to what I want. How can I implement the same in v4?
http://bl.ocks.org/MoritzStefaner/1377729
var text = g.append("g")
.attr("class", "labels")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.attr("class", "dataLabels")
.attr("font-size","6px")
.attr("dx", 6)
.attr("dy", ".15em");
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
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.
I am trying to label Y-axis of my graph using following code:
svg1.append("text").attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 10)
.attr("dy", "-40")
.attr("transform", "rotate(-90)")
.text("life expectancy (years)");
But when I try to change the 'y' value to 50, the label moves towards right, I am not able to understand why it is so. Moreover what is "dy" for, and why there is no "x" attribute. :(
Please help.
you transform the default coordinate axes. i guess dy means dynamic-y and you can use x and dx.
http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute