konrad konrad - 2 months ago 16
CSS Question

axis text style in d3.js without CSS

I am trying to control the style of d3.js Scatter Plot Matrix chart entirely with JS without using CSS. I know its a little inefficient that way, but I am rendering more than one chart and they all have different styles. Can someone tell me what am I doing wrong here, because my axis text has disappeared.

JS Bin:

https://jsbin.com/siqewicizu/edit?js,output

Code for reference:

var width = 960,
size = 230,
padding = 20;

var x = d3.scale.linear()
.range([padding / 2, size - padding / 2]);

var y = d3.scale.linear()
.range([size - padding / 2, padding / 2]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(6);

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(6);

var color = d3.scale.category10();

var domainByTrait = {},
traits = d3.keys(data[0]).filter(function(d) { return d !== "species"; }),
n = traits.length;

traits.forEach(function(trait) {
domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; });
});

xAxis.tickSize(size * n);
yAxis.tickSize(-size * n);

var svg = d3.select("body").append("svg")
.attr("width", size * n + padding)
.attr("height", size * n + padding)
.append("g")
.attr("transform", "translate(" + padding + "," + padding / 2 + ")");

svg.selectAll(".x.axis")
.data(traits)
.enter().append("g")
.attr("class", "xAxis")
.attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
.each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });

svg.selectAll(".y.axis")
.data(traits)
.enter().append("g")
.attr("class", "yAxis")
.attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
.each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); });

svg.selectAll(".xAxis")
.style("fill", "none");

svg.selectAll(".yAxis")
.style("fill", "none")

svg.selectAll("line")
.style("stroke", "#ddd")
.style("shape-rendering", "crispEdges");

var cell = svg.selectAll(".cell")
.data(cross(traits, traits))
.enter().append("g")
.attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
.each(plot);

// Titles for the diagonal.
cell.filter(function(d) { return d.i === d.j; }).append("text")
.attr("x", padding)
.attr("y", padding)
.attr("dy", ".71em")
.style("font-weight", "bold")
.style("text-transform", "capitalize")
.style("font-family", "arial")
.style("font-size", "10px")
.text(function(d) { return d.x; });

function plot(p) {
var cell = d3.select(this);

x.domain(domainByTrait[p.x]);
y.domain(domainByTrait[p.y]);

cell.append("rect")
.style("fill", "none")
.style("stroke", "#aaa")
.style("shape-rendering", "crispEdges")
.attr("x", padding / 2)
.attr("y", padding / 2)
.attr("width", size - padding)
.attr("height", size - padding);

cell.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return x(d[p.x]); })
.attr("cy", function(d) { return y(d[p.y]); })
.attr("r", 4)
.style("fill-opacity", "0.7")
.style("fill", function(d) { return color(d.species); });
}

function cross(a, b) {
var c = [], n = a.length, m = b.length, i, j;
for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
return c;
}

Answer

Your axis text is present, but as you have set the fill to none in it's parent it's not being displayed as that is getting inherited. You could add this below your two fill: none declarations:

svg.selectAll(".xAxis text") .style("fill", "#000"); svg.selectAll(".yAxis text") .style("fill", "#000");

and the result is the axis labels in black as you can see here: https://jsfiddle.net/MaryBartlett/jc4mp14s/

Comments