CSSを使用しないd3.jsの軸テキストスタイル

Question

CSSを使用せずに、d3.jsスキャッタプロットマトリックスチャートのスタイルをJSで完全に制御しようとしています。私はそれが少し非効率な方法を知っていますが、私は複数の図をレンダリングしています、そして、彼らはすべて異なったスタイルを持っています。私の軸のテキストが消えたので、誰かが私がここで間違っていることを教えてもらえますか？

JSビン：

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

コードの参照用：

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 1

あなたの軸のテキストが存在しているが、あなたはそれにnoneに塗りつぶしを設定しているとして、それは次のように表示されていないの親のそれは継承されています。あなたは2つのfill: none宣言の下にこれを追加することができます。

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

、あなたがここに見ることができるように、結果は黒で軸ラベルを次のとおりです。 https://jsfiddle.net/MaryBartlett/jc4mp14s/